Aligning 2 lines of text on the right with Icon of same height on the left-CodePudding

I want possibly the simplest CSS code for aligning 2 lines of text with 1 single icon on the left side. I am attaching the sample here: https://prnt.sc/1udg41j Please help with the minimal code if possible.

CodePudding user response：

Make sure the image is within the same parent as the text and then to have the icon be on the left side. I believe you'll need to type:

example {
 float: left;
}

It would be much easier if you included the code. :P

CodePudding user response：

.main {
  display: flex;
}

.iconbox {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}

.icon {
  margin-right: 10px;
  border: 1px solid red;
  font-size: 42px;
  height: 50px;
  width: 50px;
  display: grid;
  place-content: center;
}

h3 {
  margin: 0;
}

p {
  margin: 5px 0 0;
}

<div class="main">
  <div class="iconbox">
    <span class="icon">&#8512;</span>
    <div class="detail">
      <h3>heading here</h3>
      <p>discription here..</p>
    </div>
  </div>
  <div class="iconbox">
    <span class="icon">&#8512;</span>
    <div class="detail">
      <h3>heading here</h3>
      <p>discription here..</p>
    </div>
  </div>
  <div class="iconbox">
    <span class="icon">&#8512;</span>
    <div class="detail">
      <h3>heading here</h3>
      <p>discription here..</p>
    </div>
  </div>
</div>