Display Two <div>s Side-by-Side [duplicate]

Question

My goal is to display two <div>s side-by-side with the content from both <div>s aligned at the top. I do not want long text in the second <div> to wrap underneath the first one.

Finally, I do not want to set the width of the second <div> because I need the markup to work in different widths.

Sample markup is below and at http://jsfiddle.net/rhEyM/.

CSS

.left-div {     float: left;     width: 100px;     height: 20px;     margin-right: 8px;     background-color: linen; } .right-div {     float: left;     margin-left: 108px;     background-color: skyblue; }​ 

HTML

<div class="left-div">     &nbsp; </div> <div class="right-div">     My requirements are <b>[A]</b> Content in the two divs should line     up at the top, <b>[B]</b> Long text in right-div should not wrap     underneath left-div, and <b>[C]</b> I do not want to specify a     width of right-div. I don't want to set the width of right-div     because this markup needs to work within different widths. </div> 

​

Answer 1

Try to Use Flex as that is the new standard of html5.

http://jsfiddle.net/maxspan/1b431hxm/

<div id="row1">     <div id="column1">I am column one</div>     <div id="column2">I am column two</div> </div>  #row1{     display:flex;     flex-direction:row; justify-content: space-around; }  #column1{     display:flex;     flex-direction:column;  }   #column2{     display:flex;     flex-direction:column; }