Can I limit the width of text inside of a <p>?

In Markdown images are wrapped inside of paragraphs. I'd like images to be wider than text and fill the container's larger width. How can I solve this? Here is an example: https://sidey.now.sh/2019/08/31/difference-between-font-formats/

Ideally the text would only have a width of 40rem.

Solution

You can solve this using CSS grid:

.container {
  margin:0 50px;
  border:1px solid;
}
.container >p {
  display:grid;
  grid-template-columns:1fr minmax(0,20rem) 1fr;
}

/* this pseudo element will take the first column and force the text to be on the middle one */
p::before {
  content:"";
}
/**/

p > img {
  grid-column:1/span 3; /* the image should take all the 3 columns (full width) */
}

img {
 max-width:100%;
}

<div class="container">
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
<p><img src="https://images.unsplash.com/photo-1580792214064-6102bf1948d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80" alt="image"></p>
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
</div>