Solutions for keeping elements on the same line:
Flexbox Approch
To ensure that elements stay on the same line, you can make them flex items by turning the container into a flexbox (unless you set flex-wrap: wrap for the container). By making #cont1 a flexbox container, you prevent the items from wrapping onto a new line. Additionally, floats are ignored for flex items, and specifying width for the items is optional. Here is a demonstration:
#cont1 {
/* make it a flex-container */
/* children will become flex-items */
display: flex;
width: 50%;
}
#div1, #div2 {
border: 1px solid black
}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
You can designate your container as a grid container and define templates where column widths are specified. Below is an example:
#cont1 {
/* make it a grid-container */
/* specify column widths */
display: grid;
width: 50%;
grid-template-columns: auto auto;
}
#div1, #div2 {
border: 1px solid black
}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
To achieve this in IE10+/Edge, you need to use older syntax and manually specify cell placement unless all grid items will stack in the first cell. Here's a demo:
#cont1 {
/* make it a grid-container */
/* specify column widths */
display: -ms-grid;
display: grid;
width: 50%;
grid-template-columns: auto auto;
}
#div1, #div2 {
border: 1px solid black
}
#div2 {
-ms-grid-column: 2;
}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Table Method
Simply apply display: table for the container and display: table-cell for the items. Check out the example below:
#cont1 {
/* make it a table-container */
/* specify column widths */
display: table;
width: 50%;
table-layout: fixed;
}
#div1, #div2 {
display: table-cell;
border: 1px solid black
}
<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...
</div>
</div>