CSS text wrapping around left aligned image-CodePudding

I have a problem getting the following h2 title to wrap around the left align image if the title is long. It works perfectly with short titles.

The problem is due to the positioning for the border effect I have added on the pseudo element.

Can anyone help me solve this?

h2.sub-title {
  font-size: 28px;
  position: relative;
  display: inline-block;
}

h2.sub-title::before {
  position: absolute;
  height: 8px;
  width: 130px;
  left: 0;
  top: -10px;
  background: #441A6D;
  display: block;
  content: "";
}

.wp-post-image {
  float: left;
  margin: 0 15px 10px 0;
}

<div style="width: 800px"><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg"  alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w"
    sizes="(max-width: 420px) 100vw, 420px">
  <h2 >Test long English title that isnt wrapping</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p>
  <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis.
  <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.</p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.</p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
</div>

CodePudding user response：

Inside h2.sub-title, you need to change the following:

display: inline-block;

to be:

display: flex;

Here's a working example - https://jsfiddle.net/bj3vcxzt/1/

CodePudding user response：

Style attribute for h2.sub-title needs to be either display: flex or display: block