CSS: Inline Div with auto width pushes down when the text is long

Question

I'm facing a css problem realted to inline-div. When the text(or sentece) is long, the inline div pushes down as on the image below:

But, when I add a line break, It works perfectly.

How can I make it work without having to use <br> ?

The main content to be posted is dynamic and it also needs to be responsive. Thanks

Please Note: This is a simplified version of my actual code. In the actual code the width of the main container is 100%

HTML

<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>

CSS

body{
    width: 350px;
    margin: 0px auto;
}
#container {
    border: 15px solid orange;   
}
#firstDiv{
    border: 10px solid brown;     
    display:inline-block;
    width: 70px;      
    overflow:hidden; 
    vertical-align:top;
}
#secondDiv{
    border: 10px solid skyblue;         
    float:left;
    width: 70px;     
}
#thirdDiv{
    display:inline-block;
    border: 5px solid yellowgreen; 
    vertical-align:top;    
}

Answer 1

You can use flexbox. Just add

#container { 
  display: flex;
}

 body { width: 350px; margin: 0px auto; } #container { display: flex; border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; vertical-align: top; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } #thirdDiv { display: inline-block; border: 5px solid yellowgreen; vertical-align: top; } 

 <div id="container"> <div id="firstDiv">FIRST</div> <div id="secondDiv">SECOND</div> <div id="thirdDiv">THIRD <br>some more content<br> some more content </div> 

Answer 2

use : white-space: nowrap; for the div containing the long sentences.