How to have auto spacing inside <li> with a element on the right extreme always

Question

I have an unordered list. Im using bootstrap classes. What I want is that the the two buttons update and remove must always be in the right extreme and the width of the text on the left must be auto adjust with the screen size it can have a minimum size. Im new to html and css here. Please help me put the buttons to the right. I have added the image of the screen with responsible code for it.

Top part shows the list I have created and below is code responsible for it :

Answer 1

Using a flexbox for the li where the text is in a span and the buttons are inside a span . Using space-between for the flexbox will align the buttons to the right and the text to the left.

 ul { padding: 0; width: 60%; } li { display: flex; width: 100%; justify-content: space-between; align-items: center; border: thin solid lightgray; padding: .5em; } .update { background: orange; color: white; margin-right: 0.5em; border: none; border-radius: 2px; padding: .3em; } .remove { background: red; color: white; border: none; border-radius: 2px; padding: .3em; } 

 <ul> <li><span>Charlie three</span><span class="myButtons"><button class="update">Update</button><button class="remove">Remove</button></span></li> <li><span>Bravo two</span><span class="myButtons"><button class="update">Update</button><button class="remove">Remove</button></span></li> <li><span>newuser</span><span class="myButtons"><button class="update">Update</button><button class="remove">Remove</button></span></li> <li><span>Golf</span><span class="myButtons"><button class="update">Update</button><button class="remove">Remove</button></span></li> </ul>