CSS two columns without specific widths

Question

I am trying to port a simple two column table to use div and float. I need the feature of a table that is able to scale the width of all columns to the largest content (without taking the whole browser width), but would like the added feature of floats to be able to split the columns when the browser width is reduced.

I can achieve this using something like this:

div {
  max-width: 285px;
}

div div:first-child {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
  width: 145px;
}

div div:nth-of-type(2) {
  float: right;
  border: 1px solid #ccc;
  margin: 1px;
  width: 130px;
}

div div:last-child {
  clear: left;
}

<div>
  <div>The</div>
  <div>12</div>
  <div class="clear" />
  <div>The cat</div>
  <div>12 34</div>
  <div class="clear" />
  <div>The cat sat</div>
  <div>12 34 56</div>
  <div class="clear" />
  <div>The cat sat on</div>
  <div>12 34 56 78</div>
  <div class="clear" />
  <div>The cat sat on the</div>
  <div>12 34 56 78 9A</div>
  <div class="clear" />
  <div>The cat sat on the mat</div>
  <div>12 34 56 78 9A BC</div>
  <div class="clear" />
</div>

How is it possible to achieve the same result without needing to set width and max-width values for the divs? With a table this would be automatic, but would lose the split capability. I am hoping there is a CSS only solution.

The result should be two aligned columns which are able to split when necessary, as shown in the picture link.

Answer 1

Since I don't think it is possible with only CSS, I have a jQuery solution, so it goes:

var xyz = $('.row div:first-child'),
  abc = $('.row div:nth-child(2n)'),
  arr = [],
  arr2 = [];

xyz.each(function() {
  arr.push($(this).width());
});

var max = Math.max.apply(Math, arr);
xyz.css('width', max);

abc.each(function() {
  arr2.push($(this).width());
});

var max2 = Math.max.apply(Math, arr2);
abc.css('width', max2);

.row {
  width: 100%;
  overflow: hidden;
}

.row div {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
}

.row div:nth-child(2) {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="xyz">
  <div class="row">
    <div>The</div>
    <div>12</div>
  </div>
  <div class="row">
    <div>The cat</div>
    <div>12 34</div>
  </div>
  <div class="row">
    <div>The cat sat</div>
    <div>12 34 56</div>
  </div>
  <div class="row">
    <div>The cat sat on</div>
    <div>12 34 56 78</div>
  </div>
  <div class="row">
    <div>The cat sat on the</div>
    <div>12 34 56 78 9A</div>
  </div>
  <div class="row">
    <div>The cat sat on the mat</div>
    <div>12 34 56 78 9A BC</div>
  </div>
</div>

Answer 2

Add to the second one div margin-left and float: left.

div div:nth-of-type(2) {float:left; border: 1px solid #ccc; margin: 1px 1px 1px 80px; width: 130px;}
                              ^^^^                                              ^^^^

https://jsfiddle.net/shhdq5kg/