I'm currently working on a design layout using bootstrap 4 alpha version and I must say, the cards feature is quite impressive.
Specifically, I have this section within the layout where I want to align the phone number and email address info on the same line. Now, I wouldn't call myself a CSS expert by any means, but I know enough to get myself in trouble. So, I'm a bit unsure on how to go about achieving this effect correctly. Any advice or tips would be greatly appreciated.
Below is the code snippet that I'm currently working with:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/avatars/adelle.jpg" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<span class="favorite"><a href="#"><i class="fa fa-star"></i></a></span>
<h6 class="media-heading">Jacqueline Perry</h6>
<span class="company">Domino Technologies</span>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="details">
<li class="phone"><i class="fa fa-mobile fa-lg fa-lg"></i> (123) 786-4533 </li>
<li class="email"><a href="#"><i class="fa fa-paper-plane-o"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e747f7d6f6b7b7277707b306e7b6c6c675e6d737776707d75707678767b7377787b60757075">[email protected]</a></a></li>
<li class="address"><i class="fa fa-map-marker"></i> 338 West 23rd Street New York, NY 10011, USA </li>
</ul>
</div>
</div> <!-- ./row -->
</div>
</div>
The goal here is to achieve something like the example shown in the image below: