CSS - Два Divs бок о бок авто ширина

Question

Я хочу сделать две колонки с текстом внутри. В зависимости от того, где будет больше текстового поля, ширина будет увеличена, но высота должна быть одинаковой.

Это мой код, и я не знаю, как решить проблему.

https://jsfiddle.net/x0qqtr2y/

<div id="main> 
    <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div> 
    <div class="cell2">SomeTEXTSomeTEXT</div> 
</div> 

#main { 
    width:100%; 
    background:gray; 
    display:table; 
    position:relative; 
} 
.cell1 { 
    width:auto; 
    height:auto; 
    display:table-cell; 
    background:red; 
    float:left; 
} 

.cell2 { 
    width:auto; 
    height:auto; 
    display:table-cell; 
    float:left; 
    background:blue; 
} 

Answer 1

использование дисплея: сгибать; на примере родительского элемента ниже

CSS

#main { 
width:100%; 
display:flex; 
} 
.cell1 { 
    background:red; 
} 

.cell2 { 
    background:blue; 
} 

HTML на ваш главный убедитесь, что вы закрыть кавычки

<div id="main"> 
    <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div> 
    <div class="cell2">SomeTEXTSomeTEXT</div> 
</div> 

Чтобы узнать больше о прогибается используйте ссылку: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Я бы попробовал этот CSS, работал, когда я попробовал его в вашей скрипке:

#main { 
    width:100%; 
    background:gray; 
    position:relative; 
} 
#main div { 
    display: inline; 
} 

.cell1 { 
    background:red; 
} 

.cell2 { 
    background:blue; 
} 

Answer 3

Привет Потому что у пропустить (") ID =" основной»ниже код работает нормально проверить это

CSS

#main { 
width:100%; 
background:gray; 
} 
.cell1 { 
background:blue; 
float:left; 
} 
.cell2 { 

float:left; 
background:red; 
} 

Html

<div id="main"> 
<div class="cell1">SomeTEXTSomeTEXTSome</div> 
<div class="cell2">SomeTEXTSomeTEXT1</div> 
</div>