aligning 2 divs next to each other - html

Question

I have 2 section on a home page, both with a picture and some text. I want to get the picture and the text of the top section next to each other (picture on left and text on the right). And then in the bottom section the text on the left and the picture to the right of the text.
Snippet
.alignnone {
width: 20%;
display: inline-block;
height: 20px;
padding: 13px;
box-sizing: border-box;
}
.first {}
.button {
text-decoration: none;
color: #000;
border-radius: 5px;
border: 1px solid;
padding: 10px;
background-color: #43dbdb;
margin: 1%;
float: left;
}
.drop {
width: 30% !important;
border: none;
padding: 0%;
float: right;
}
.top {
display: inline-block;
vertical-align: top;
padding: 2%;
}
.bottom {
display: inline-block;
vertical-align: bottom;
padding: 2%;
}
#content {
background-color: #D7DBDD;
background-size: 90%;
padding: 6%;
margin: -2%;
}
h2 {
text-align: center;
}
<div class="top">
<img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3695.jpg" height="99" width="99" alt="Anna" class="alignnone " />
<h3>ABOUT ME</h3>
<p class="first ">.....</p>
</div>
<div class="bottom">
<img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" height="99" width="99" alt="Anna" class="drop" />
<h3>WHAT I DO</h3>
<p class="second">.....</p>
</div>

Answer 1

Is this (created a codepen) something you are looking for?
<div class="top">
<div class="clearfix">
<img class="img1" src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" width="99" height="99">
<h3>ABOUT ME</h3>
<p class="first ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>
</div>
<div class="bottom">
<div class="clearfix">
<img class="img2" src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" width="99" height="99">
<h3>WHAT I DO</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p></div>
</div>
CSS:
.drop {
width: 30% !important;
border: none;
padding: 0%;
}
.top {
vertical-align: top;
padding: 2%;
}
.bottom {
vertical-align: bottom;
padding: 2%;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
margin-left: 15px;
}
.img1{
float: left;
margin-right: 15px;
}