CSS-两个Divs并排自动宽度

Question

I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.

This is my code, and i don't know how to solved the problem.

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

use display:flex; on the parent element example below

CSS

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

.cell2 {
    background:blue;
}

HTML on your main make sure you close the quote marks

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

To learn more about flex use the link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I would try this CSS, worked when I tried it in your Fiddle:

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

.cell1 {
    background:red;
}

.cell2 {
    background:blue;
}

Answer 3

Hi Because u miss (") id="main" below code working fine check it

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>