Принудительные элементы, которые не обертываются (относительно друг друга)

Question

У меня есть два div с текстом, который я хочу отображать рядом друг с другом (например, с ячейками таблицы). Но если родительский div недостаточно широк, они появляются ниже друг друга.

Что я хочу:

+------------------+------------------+ 
|     | Some Long text | 
| Some short text | Some Long text | 
|     | Some Long text | 
+------------------+------------------+ 

Что я получаю:

+------------------+ 
|     | 
| Some short text | 
|     | 
+------------------+---------------------------+ 
| Some Long text Some Long text Some Long text | 
+----------------------------------------------+ 

Если я заставляю вторую ширину div «s, я получаю результат, что я хочу, но я хочу, чтобы принять всю оставшуюся ширину. Как я могу это сделать ?

<div style="width: 300px; border: solid 1px;"> 
 
    <div style="vertical-align: middle; display: inline-block; background-color: cyan;"> 
 
    Some short text 
 
    </div> 
 
    <!-- if I set 'width: 150px' below, I get what I want --> 
 
    <div style="vertical-align: middle; display: inline-block; background-color: green;"> 
 
    Some long text. Some long text. Some long text. 
 
    </div> 
 
</div>

Answer 1

Вы можете сделать это, установив дисплей обоих дивы в таблицу-клетки вместо инлайн-блока:

<div style="width: 300px; border: solid 1px;"> 
 
    <div style="vertical-align: middle; display: table-cell; background-color: cyan;"> 
 
    Some short text 
 
    </div> 
 
    <!-- if I set 'width: 150px' below, I get what I want --> 
 
    <div style="vertical-align: middle; display: table-cell; background-color: green;"> 
 
    Some long text. Some long text. Some long text. 
 
    </div> 
 
</div>