CODEWITHSUNDEEP
css
joel
joel

Reputation: 255

how to place correctly a block at the bottom of another

I will wish that my description to be at the bottom of the title.

enter image description here

I don't see how to I can place the description at the bottom of the title?

I think that my blocks are ok in HTML ?

<div class="container">
  <div class="row">
     <img class="img-block" src="https://zupimages.net/up/20/21/yljn.png"  alt="image"/>
        <div class="title">My title</div>
        <div class="description">This is a description</div>
  </div>
</div>


.body, *{
  margin:0;
  padding: 0;
}

.container{
    background-color: rgba(165, 119, 79, 0.4);
    width: 50%;
    height: 500px;
    float: right;
    
}

.row{
   display: flex;
   padding-top: 50px;
   padding-left: 33px;
   background-color: aqua;
}


.img-block{
  display: inline-block;
}


.title{
  text-transform: uppercase;
  display: inline-block;
  padding-left: 20px;  
}


.description{
  display: inline-block;
  padding-left: 20px;
}
<div class="container">
  <div class="row">
  <img class="img-block" src="https://zupimages.net/up/20/21/yljn.png"  alt="image"/>
     <div class="title">My title</div>
      <div class="description">This is a description</div>
   </div>
 </div>

Upvotes: 1

Views: 124

Answers (1)

Sweet Chilly Philly
Sweet Chilly Philly

Reputation: 3219

<div class="container">
  <div class="row">
     <img class="img-block" src="https://zupimages.net/up/20/21/yljn.png"  alt="image"/>
    <div class="wrapper">
        <div class="title">My title</div>
        <div class="description">This is a description</div>
    </div>
  </div>
</div>

What you can do is add a wrapper div around your title and description and then add the following CSS:

.wrapper {
   display: flex;
   flex-direction: column;
}

Upvotes: 2

Related Questions