How to size a paragraph the same height as an image-CodePudding

Trying to get the paragraph to be the same size as the image on the right as it. currently it is the bottom of the paragraph changes size but the top is fixed

kid with toy cars

my CSS code is

.kid{
    display: flex;
    position: relative;
    float: right;
    height: auto;
    max-width: 50%;
}


.paragraph{
    display: flex;
    margin-right: 50%;
    font-size-adjust: auto;
    background-color: #3498db;
    color:white;
    font-style: italic;
    font-weight: bold;
}

and my HTML code is

<div>       
<img class = "kid" src="kid playing toy pic.jpg">
</div>      
    
       
<div class = "para">    
<section >
    <p> "text" </p>  
</section>
</div>

CodePudding user response：

Because you want the size of the image to be dynamic with the length of the paragraph, I would use a 2-column flex layout with the second div containing the image as background-image. Do it this way is responsive because the height of the image-div will change as the paragraph gets smaller or larger.

.wrapper {
  display: flex;
  width: 100%;
  flex: auto;
}

.paragraph {
  background-color: #3498db;
  color: white;
  font-style: italic;
  font-weight: bold;
  width: 50%;
}

.image-div {
  background-image: url('https://dummyimage.com/600x400/000/fff');
  background-position: center;
  background-size: cover;
  width: 50%;
}

<h6> smaller </h6>
<div >
  <div >
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged </p>
  </div>
  <div >

  </div>
</div>


<h6> larger </h6>
<div >
  <div >
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
      ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum
      is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div >

  </div>
</div>

CodePudding user response：

not entirely clear what you actually want. Use flex.

.paragraph {
  display: flex; 
  justify-content:space-between;
  background-color: #3498db;
  color: white;
  font-style: italic;
  font-weight: bold;
}

<section >
  <p> "text" </p>
  <img  src="https://via.placeholder.com/150">
</section>