HTML/CSS - Joining multiple text elements together

Question

I have the following code:

HTML:

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

CSS:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

It has a wrapper div, a few p elements, and then a div with rendered markdown. However, as seen in the JSFiddle, the first two p elements are joined together, but the rest of the text isn't. How can I get it to look like one continuous text element?

Answer 1

Your div is being wrapped on the next line because it is enought big to do so. flex-wrap is responsible for this behavior. Without flex-wrap it looks like this:

.wrapper {
  display: flex;
  align-items: center;
}

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

However, it will only create 3 blocks side by side and will not look like a continuous text element. None of the flex properties can do this unless it's really a continuous text.

---

Continuous text over block elements

You can use display:contents; to achieve something like this:

.wrapper {
  display: flex;
  align-items: center;
}
.wrapper * {
  display: contents;
}

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.

Source: caniuse.com