How do you make a table column that never wraps and is auto width?

Question

I need to create a two-column full-width table where:

• Column 1 wraps when it needs to
• Column 2 never wraps and fills any empty space

See a visual example here:

I'm having a lot of trouble figuring this out... here's where I'm up to:

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  width: 60%;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;
}

<h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>Not much text</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>

Notice that col-1 isn't expanding because of the width: 60% on col-2. If I remove that, then col-1 defaults to taking up all the space, which breaks Example B.

I can get this working with flexbox, but then the columns don't line up properly when col-1 wraps... so I think it needs to remain a table.

Any ideas would be massively appreciated. Thank you!!

Answer 1

CSS grid should do it:

div {
  display: grid;
  width: 250px;
  grid-gap: 2px;
  grid-template-columns: auto 1fr;
}

.col-2 {
  white-space: nowrap;
  text-align: right;
}

p {
  background: hotpink;
  margin: 0;
}

<h4>Example A</h4>

<div>
  <p class='col-1'>Not much text</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>

<h4>Example B</h4>
<div>
  <p class='col-1'>This has a lot of text that wraps</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>

Answer 2

You can add "white-space: nowrap" to td because of this it will never wraps and it will take is auto width.

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  width: 60%;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;white-space: nowrap;
}

<h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>Not much text</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>