How to align one tag with another multi-line tag?

user_5067058 0
Viewed 135

This is the basic outline of my code:

<div>
  <h6>Heading 6</h6>
  <p>- Long paragraph text that needs to wrap to the next line.</p>
</div>

I want to make the render look like this:

Heading 6 - Long paragraph text that needs
to wrap to the next line.

I know that styling the <h6> and <p> with display: inline-block will get them on the same line if the text in <p> is short, but otherwise, the text in <p> won't break to the next line even if I add word-break: break-word.

I tried adding display: flex to the <div>, but this also didn't work.

Thank you in advance!

css html
3 Answers

use float and shape-outside properties.

P.S. Although shape-outside property is not needed in this case but it can be used to customize the text wrapping.

p, h6 {
  margin: 0;
}

h6 {
  float: left;
  shape-outside: padding-box;
  font-size: 1.5rem;
  padding: 0 15px 0 0;
}
<div>
  <h6>Heading 6</h6>
  <p>
    Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that
    needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. - Long paragraph text that needs to wrap to
    the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line. Long paragraph text that needs to wrap to the next line.
  </p>
</div>

user_60943480

You can set both the heading and the paragraph to display inline.

h6, p {
    display: inline;
}

This should wrap the paragraph around the heading.

user_128527400 

    div {
    width: 50%;
    }

    p {
      display: inline;
    }

    h6 {
      font-size: 18px;
      display: inline;
    }
    <div>
      <h6>Heading 6</h6>
      <p>
      - Long paragraph text that needs to wrap to the next line.
      </p>
    </div>

user_16119280
Related