HTML/CSS float issues - html

Question

I'm trying to get a layout like this picture below but I'm not doing very well.
As you can see, I'm trying to put a picture on the left and a somewhat-complicated div on the right. So far, I've been trying with float without much luck:
#image {
height: 50px;
width: 100px;
float: left;
}
#text {
float: left;
}
.column {
width: 20%;
float: left;
padding-left:10px;
}
.column::after {
clear: both
}
<div id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p>
<h2> This is the end of the section </h2>
</div>
</div>
Sorry to ask a trivial question, I'm googling all over and can't get this to work.

Answer 1

The issue is that #text takes 100% width. So it comes below the image. If you set a specific width for #text, it will float.
#text {
width: 500px;
}

Answer 2

Please try this once
#image {
padding-top:100px;
height: 50px;
width: 100px;
}
.column {
width: 20%;
padding-left:10px;
}
.column::after {
clear: both
}
#main_section{
display: flex;
}
.wrapper{
display: flex;
}
<div id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<div class="wrapper"><p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p></div>
<h2> This is the end of the section </h2>
</div>
</div>

Answer 3

Can you please check the below code? Hope it will work for you. We have solved it with the help of the flex property. If you want to get two elements side by side then flex property is easy and very useful in comparison to float & it sets the flexible length on flexible items.
Please refer to this link: https://jsfiddle.net/yudizsolutions/bysj29tx/1/
.d-flex {
display: flex;
display: -webkit-flex;
}
#image {
height: auto;
align-self: flex-start;
-webkit-align-self: flex-start;
width: 100px;
flex-shrink: 0;
}
h2 {
margin-top: 0px;
}
.row {
margin: 0px -5px;
}
.column {
width: 50%;
padding: 0px 5px;
}
<div class="d-flex" id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<div class="row d-flex">
<p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p>
</div>
<h2> This is the end of the section </h2>
</div>
</div>