CSS Flexbox align 1 item horizontally and 2 vertically-CodePudding

I have the following HTML:

 <div >
    <div >
      <svg>...</svg>
    </div>
    <h3>Title here</h3>
    <p>Lorem ipsum dolor...</p>
 </div>

My CSS:

.icon-box {
  display: flex;
}

The result:

How can i get the following using flexbox without changing the HTML:

I am trying to align the icon to left and the heading and paragraph to its right on the same column. Without changing/adding new HTML.

CodePudding user response：

Try using flex-direction: column; on main parent and regular display: flex; (flex-direction: row;) on the child of parent.

.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon {
  display: flex;
  gap: 10px;
}

<div >
    <div >
      <img src="https://dummyimage.com/50/000000/f2009d&text=SVG">
      <h3>Title here</h3>
    </div>
    <p>Lorem ipsum dolor...</p>
 </div>

CodePudding user response：

You can use from grid(If you want not changing the HTML):

/*CSS*/

.icon-box {
  width: 250px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50px 50px;
}

.icon-box p {
  grid-column: 2 / 3;
}

<!--html-->

<div >
  <div >
    <svg>
        <rect width="100" height="50" style="fill: red" />
    </svg>
  </div>
  <h3>Title here</h3>
  <p>Lorem ipsum dolor...</p>
</div>

If you want to use flex, you must wrap 'h3,p' inside a div:

CSS:

.icon-box{
    display: flex;
    width: 300px;
    border: solid;
}
.text{
    width: 300px;
}

HTML:

 <div >
    <div >
      <svg>
        <rect width="100" height="50" style="fill: red" />
      </svg>
    </div>
    <div >
      <h3>Title here</h3>
      <p>Lorem ipsum dolor...</p>
    </div>
 </div>