How to have 100% width for last column only in html and css?

Question

May I request some to help me with below HTML and CSS please? I'm trying to have the 2nd column's width 100% of its container. Below CSS is working but then I'm unable to adjust the first column's width.

.VendorInfo td,
.VendorInfo table {
  border: 1px solid black;
  border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
  width: 150px;
}
.VendorInfo td:nth-child(even) {
  width: 100%;
}

<div class="VendorInfo">
  <table>
    <tr>
      <td>
        <label>Vendor ID</label>
      </td>
      <td><span>00005467</span>
      </td>
    </tr>
    <tr>
      <td>
        <label>Vendor Name</label>
      </td>
      <td><span>Holiday Inn</span>
      </td>
    </tr>
    <tr>
      <td>
        <label>Area Name</label>
      </td>
      <td><span>Andheri West</span>
      </td>
    </tr>
    <tr>
      <td>
        <label>City Name</label>
      </td>
      <td><span>Mumbai</span>
      </td>
    </tr>
  </table>
</div>

Answer 1

You have to set table width to 100%, then you can set max-width to 100% for the second column.

.VendorInfo td, .VendorInfo table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}

.VendorInfo td:nth-child(odd) {
    width: 20%;
}

.VendorInfo td:nth-child(even) {
    max-width: 100%;
}