How to style a table layout with divs - html

Question

I'm trying to get the images on both of divs below to act as a left-column while the accompanying text acts as a right column, both in the same row.
Each row should have the other images and texts along with it. Somewhere in the shuffle, I've got my divs mixed up and they aren't working properly. I need the text to stay within the container on the right. What am I missing?
.toplinks {
width: 300px;
padding: 20px;
overflow: hidden;
}
.icon {
width: 30%;
float: left;
}
.hlbox {
width: 300px;
border: 1px solid;
border-radius: 9px 9px 9px 9px;
border-color: #999999;
background-image: url(http://ejgh.org/templates/ejgh/images/HLHeader.png), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top, bottom;
padding: 100px 20px 25px;
overflow: hidden;
}
.HLrow {
display: block;
border: 1px solid;
border-color: green;
width: 100%;
}
.HLicon {
width: 30%;
border: 1px solid;
border-color: red;
display: table-cell;
float: left;
height: inherit;
}
.HLtext {
width: inherit;
border: 1px solid;
border-color: purple;
}
<div class="toplinks">
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/findphysicianicon.jpg" alt="Find a Physician Icon" /></div>
<div class="text">
<h3>Find a Physician</h3>
<hr />Let us help you pick a doctor that fits your needs</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/paymybillicon.jpg" alt="Pay my Bill Icon" /></div>
<div class="text">
<h3>Pay My Bill</h3>
<hr />Conveniently pay your EJGH bill</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/myejghicon.jpg" alt="myEJGH.Org Icon" /></div>
<div class="text">
<h3>My EJGH.Org</h3>
<hr />See your up-to-date medical information</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/edocicon.jpg" alt="eDoc icon" width="75" /></div>
<div class="text">
<h3>eDoc</h3>
<hr />$49 Doctor visits via smartphone or online</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/mdportalicon.jpg" alt="" width="75" /></div>
<div class="text">
<h3>EJGH MD Portal</h3>
<hr />Physician login for portal access</div>
</div>
</div>
<p></p>
<!--Start HL Table-->
<div class="hlbox">
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_memberbutton.png" alt="Image of Apple and Weights for homepage" width="100%"/></div>
<div class="HLtext">
<h3>Become a Member</h3>
<hr />
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_communitybutton.png" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="100%" /></div>
<div class="HLtext">
<h3>Community Events</h3>
<hr />
<p>Learn more about the classes, events, support groups, and health screenings we offer.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_tvbutton.png" alt="Image of Liz Delsa Healthy Lifestyles Host" width="100%" /></div>
<div class="HLtext">
<h3>Watch TV Segments</h3>
<hr />
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_magbutton.png" alt="Summer 2016 Healthy Lifestyles Cover" width="100%" /></div>
<div class="HLtext">
<h3>Read the Magazine</h3>
<hr />
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</div>
<!--End HL Table-->
</div></div>
<!--End Box Div—>
Also, the boxes around the HLdiv can go away - I just was using those to try to get an eye for what's pulling where.
Thanks again.

Answer 1

If I understood correctly, all you have to do is add display: table-cell; to the HLtextclass.