CSS: align text on right of icon

Question

This is my code, how can i have icon on left and all the content to be right of it, I dont want content to go below the icon. Something like this

 .column { float: left; width: 50%; padding: 10px 0px; height: 120px; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="MED column"> <i class="fa fa-user-o"></i> <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span> <div><span id="MED"></span><span> per biweekly paycheck</span></div> <div class="subscript">The vision plan lets you save contacts. </div> </div> <div class="ADD column"> <i class="fa fa-envelope-o"></i> <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span> <div><span id="ADD"></span><span> per biweekly paycheck</span></div> <div class="subscript">You and your family be enrolled. </div> </div>

Answer 1

 .column { display: flex; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="MED column"> <i class="fa fa-user-o"></i> <div> <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span> <div><span id="MED"></span><span> per biweekly paycheck</span></div> <div class="subscript">The vision plan lets you save contacts.</div> </div> </div> <div class="ADD column"> <i class="fa fa-envelope-o"></i> <div> <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span> <div><span id="ADD"></span><span> per biweekly paycheck</span></div> <div class="subscript">You and your family be enrolled.</div> </div> </div>

Answer 2

With the risk of using too much float: Add float to the icon and margin to the text-content, then it wraps around in your case.

 i { float: left; } .column { float: left; width: 50%; padding: 10px 0px; height: 120px; } .margin { margin-left: 25px; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="MED column"> <i class="fa fa-user-o"></i> <div class="margin"> <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span> <span id="MED"></span><span> per biweekly paycheck</span> <div class="subscript">The vision plan lets you save contacts.</div> </div> </div> <div class="ADD column"> <i class="fa fa-envelope-o"></i> <div class="margin"> <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span> <span id="ADD"></span><span> per biweekly paycheck</span> <div class="subscript">You and your family be enrolled.</div> <div> </div>

Answer 3

You can use CSS flexbox to do this.

 *, :before, :after { margin: 0; padding: 0; } .item { display: flex; justify-content: center; } .left { flex: 1; max-width: max-content; display: flex; justify-content: center; } .right { flex: 1; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="item"> <div class="left"> <i class="fa fa-user-o"></i> </div> <div class="right"> <h4><u><b>Title</b></u></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae inventore ex deleniti numquam optio ea possimus. Libero dolorum eos soluta cum magni velit, voluptatum eveniet iste dignissimos, asperiores quo itaque.</p> </div> </div>

Answer 4

 .column { /*float: left;*/ width: 50%; padding: 10px 0px; height: 120px; display: flex; gap: 0.5rem; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="MED column"> <i class="fa fa-user-o"></i> <div class="text"> <span style="text-decoration: underline;"> <b>Medical Bill reimbursemenet employee</b> </span> <div> <span id="MED"></span> <span> per biweekly paycheck</span> </div> <div class="subscript"> The vision plan lets you save contacts. </div> </div> </div> <!-- <div class="ADD column"> <i class="fa fa-envelope-o"></i> <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span> <div><span id="ADD"></span><span> per biweekly paycheck</span></div> <div class="subscript">You and your family be enrolled. </div> </div> -->

Wrap the text content inside a container and give a display: flex; to the .column . This is just one of the various solutions you can get.