CSS: align text on right of icon-CodePudding

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>

CodePudding user response：

.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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

.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 >
  <i ></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 >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.