Custom HTML between two boxes

Create HTML for the two boxes?
If you want HTML in two boxes as a given figure (images). You can start "mainBoxRow" and create "left side" box use CSS float:left; it's important width:150px; and in the "mainLine"
box using important thing "margin-left:180px" it will feel that this is float-right side and we have not given width and width showing 100%. For more explain HTML please see example below:

<style>

body{font-family: Arial, Helvetica, sans-serif;}

.leftSide{ margin: 0 30px 15px 0; background: #0bf; padding: 5px; width: 150px; float: left; color: #fff;}

.leftSide img{ max-width: 100%;}

.mainBoxRow{background: #eee; margin-bottom: 20px; padding: 20px;}

.mainLine{  margin-left: 180px; background: #0b6; color: #fff; padding: 10px;}

</style>

<div class="mainBoxRow">

    <div class="leftSide">Left side content </div>

    <div class="mainLine">

Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.

</div>

</div>

<div class="mainBoxRow">

        <div class="leftSide">Left side content </div>

        <div class="mainLine">

    Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.

    </div>

    </div>

    <div class="mainBoxRow">

            <div class="leftSide"><img src="anythinglearn.png" alt="AnythingLearn"></div>

            <div class="mainLine">

        Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.

        Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.

        </div>

        </div>