How to align divs in a row inside a list item and fill all horizontal space

Question

CSS newbie here. I want to have the text div fill all the horizontal space and have the button "stick" to the right. item number, text and button should all be on the same row, even if if the text doesn't fit on one row. If this layout is redundant or insufficient, please correct me.

I want it to look like this:

<ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>

      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>

Answer 1

Add display: flex; to the parent (i.e., .wrapper) and flex-grow: 1; to the child (i.e., .text).

See the snippet below.

.wrapper {
  display: flex;
}

.text {
  flex-grow: 1;
}

<ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>
      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>

Answer 2

You can use flex with gap too like:

.wrapper{
  display:flex;
  gap: 10px;
}

<ol>
  <li>
     <div class="wrapper">
       <div class="text">
         some item text
       </div>
       <div class="button">
         <a>GO</a>
       </div>
     </div>
  </li>
</ol>