Сделать второй столбец таблицы span на первый, если он слишком длинный

Question

Так что в основном вот мой текущий результат:

24 February   TITLE TITLE TITLE TITLE
              TITLE TITLE
              CONTENT CONTENT CONTENT

И я хочу это вместо этого:

24 February   TITLE TITLE TITLE TITLE
TITLE TITLE
              CONTENT CONTENT CONTENT

Вот HTML:

<table>
  <tr>
    <td>11 February</td>
    <td>TITLE TITLE TITLE TITLE TITLE TITLE TITLE</td>
  </tr>
    <td></td>
    <td>CONTENT CONTENT CONTENT</td>
  </tr>
</table>

ИCSS:

table {
  table-layout: fixed;
  width: 50%;
  border: solid;
}


td:nth-of-type(1) {
  width: 5em;
  vertical-align:top;
}

Я понятия не имею, как добиться того, чего я хочу, или даже если это хорошая идея - использовать таблицы HTML, поэтому я открыт для любых предложений!

Answer 1

это?

.a {
  width:50%;
}

.aa {
  display:inline-block;
  width:120px;
}

.ab {
   display:inline;
   word-break:break-word;
}

.b {
  word-break:break-word;
  margin-left:125px;
}

<div class="a">
  <div class="aa">
  24 February 
  </div>
  <div class="ab">
    TITLE TITLE TITLE TITLE TITLE TITLE
  </div>
</div>
<div class="b">
  CONTENT CONTENT CONTENT
</div>