How to create a blockquote in CSS that doesn't overflow on an (floating) image when displayed at the same height

Question

Here is my CSS

.img-float-right {
    float: right;
    margin: 10px 0px 25px 35px !important;
}

.blockquote {
    font-size: 1.4em;
    margin: 30px auto 30px;
    width: 90%;
    font-family: Open Sans;
    font-style: italic;
    color: #D2B39B;
    padding: 1.2em 30px 1.2em 75px !important;
    border-left: 8px solid #D2B39B;
    line-height: 1.4;
    position: relative;
    background: #f5f5f5;
}

.blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #D2B39B;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.blockquote::after {
    content: '';
}

Here is a picture of the result in the website I am building :

https://github.com/EstefanTT/public/blob/main/stackOverflow_blockQuote.png

I want the text and the quote (if necessary) to be displayed at the left of the image.

All my intents so far place the quote on top of the pictures (like the picture doesn't exist) or it pushes the Quote down and places it underneath the pictures.

I am using Nuxt.js and Nuxt-content. The page I am working on is a markdown page in which I add my own CSS. Nuxt transforms this markdown page into a JSON containing the different elements of the HTML page. I don't know exactly what is happening behind the scenes, that's why I only posted the CSS. I use Vuetify most of the time and my understanding of CSS is not very deep.

Answer 1

Just add display: flex; (flow-root, grid, table, table-cell) to blockquote.
Or add overflow: hidden; to blockquote:

.content {
  display: flow-root;
}

.content img {
  float: right;
  margin-left: 20px;
}

blockquote {
  display: flex; /*  */
  /* display: flow-root; */
  /* display: grid; */
  /* display: table; */
  /* display: table-cell; */
  /* overflow: hidden; */
  font-size: 1.4em;
  margin: 30px auto 30px;
  font-family: Open Sans;
  font-style: italic;
  color: #D2B39B;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #D2B39B;
  line-height: 1.4;
  position: relative;
  background: #f5f5f5;
}

blockquote:before {
  font-family: Arial;
  content: '\201C';
  color: #D2B39B;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

<h1>Title</h1>
<div class="content">
 <img src="https://picsum.photos/200/500" alt="">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, labore, dolor, quaerat natus id molestias laboriosam quisquam illum deserunt error consequuntur aliquid dolorum deleniti nihil eos esse rerum iusto ut maxime ullam asperiores debitis saepe reprehenderit perferendis voluptate</p>
 <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptatibus aliquid cum dolorum porro voluptate esse vero aliquam. Illum, perspiciatis.</blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, maxime nostrum debitis tenetur aperiam dignissimos alias facere quisquam voluptas atque.</p>
</div>