I'm looking for the easiest way to get a icon on the left vertical aligned with the two lines of text on the right.
What I'm struggling with is the way I have to organize my HTML. I can functionally build this, but I think it's not efficient/clean the way I do this (too much code). So any advice on how this problem can be tackled is highly appreciated :). A screenshot from what I want to achieve is below. I'm using Font Awesome and Bootstrap 3 for development.
just add div display to table-row
https://jsfiddle.net/q2x9sLo9/
Address
Mirpur New Bazar Road, Dhaka-12101
<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-envelope" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:40px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
E-mail
</h4><p>
[email protected]
</p>
</div>
</div>
<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-phone" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:59px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
Phone
</h4><p>
(732) 803-01 03
</p>
</div>``
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments