How To Make Table Cell Expand Based On Content

I want to put 3 divs next to a table. The table should expand based on the content inside, and the 3 divs should equally take up the spare space left over. And I need the divs to s

Solution 1:

Set white-space: nowrap for td in order to get the entire text in one line.

/* Do this on tablet size and up */@media (min-width: 481px) {
  /* Main outer div of helper items AND subtotals */.cart-collaterals {
    display: inline-flex;
  }
  /* Outer div of helper items */.cart-helper-outer {
    order: -1;
    display: inline-flex;
    justify-content: space-around;
  }
  /* Helper item width */.cart-helper-inner {
    max-width: 25%;
  }
  /* Helper item font */.cart-helper-innerp {
    text-align: center;
  }
}

td{
  white-space: nowrap;
}

<divclass="cart-collaterals"><divclass="cart_totals"><tableclass="shop_table"cellspacing="0"><tbody><trclass="cart-subtotal"><th>Subtotal</th><tddata-title="Subtotal">$ 348</td></tr><trclass="shipping"><th>Shipping</th><tddata-title="Shipping">
            The table should expand so that this is one line of text
          </td></tr><trclass="order-total"><th>Total</th><tddata-title="Total">$ 348</td></tr></tbody></table></div><divclass="cart-helper-outer"><divclass="cart-helper-inner"><p>This is some text. Blah blah blah. Here is some text.</p></div><divclass="cart-helper-inner"><p>This is some text. Blah blah blah. Here is some text.</p></div><divclass="cart-helper-inner"><p>This is some text. Blah blah blah. Here is some text.</p></div></div></div>