I'm sorry I don't even know how to ask my question, but basically, I need the title to be above the paragraph and the logo to be on the left side.

Picture for reference

#container {
  display: flex;
  align-items: center;
}

#container p {
  margin-left: 1em;
}

#container h4 {}


}

<div id='container'>
  <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
  <h4>
    Placeholder Title
  </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>

CodePudding user response：

I got your doubt. Basically flex works on direct child. So according to your picture reference, there are two columns, so you have to wrap h4 and p tag with a div, this makes container with 2 childs and you will get the desired result.

CodePudding user response：

It will not work with Flexbox as you cant change the flex-direction after an element within the same container. As you need to control 2 directions within the same container with your markup you have to use CSS-Grid

#container {
  display: grid;
  grid-template-columns: min-content auto;
}

#container img {
  grid-row: 1 / -1;
}

#container :not(img) {
  grid-column: 2 / -1;
}

<div id='container'>
  <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
  <h4>
    Placeholder Title
  </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>