Icon Changing position then new "object" is created

I'm currently working on a to-do-list project and have created an input field that creates new to-do-list items but then ever I create a new object in the HTML the icon and input are moved down. I want the items to look alike instead of the close icon going down.

Hope you can help. I'm using HTML, CSS, and bootstrap for the front end.

(See picture for better understanding)

.item{
    background-color: #FFF;
    border-radius: 5px;
    height: 40px;
    width: 95%;
    color: #202020;
    margin-bottom:15px;
    text-indent: 20px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;

}


#remove {
border-radius: 50%;
height: 50px;
width: 50px;
position: relative;
top: -5px;
z-index: 2;
background-image: url('images/remove.png');
background-position: center;
background-size: 50px 50px;
}

#antal {
    width: 20px;
    height: 30px;
    position: absolute;
    margin: 5px 0 0 30px;
}
 <ul id="todo">
                   <li>
                       <div class="item">
                       <div class=" row justify-content-end">
                        <button id="remove" class="btn text-align-right"></button>
                        <input type="text" id="antal" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        
                       
                    </div>
                   </div></li>
               </ul>
Image