<span> in bottom right corner of div-CodePudding

I want a div looking like this:

 -------------------------------- 
| (Chip) (Chiiiiip) (Chipppp)    |
| (Chiiiiiiiiiiiipppp)           |
|                                |
|                           More |   
 --------------------------------

Similarly the "Less" button when the div is expanded with more number of chips.

I can't position the "More" button in the bottom right corner. I want to know how to do it.

CodePudding user response：

If your container has position:relative you can use absolute positioning in a child element.

.container {
  width:300px;
    height:200px;
  position:relative;
  padding:10px;
  border:1px solid red;
}

.expand {
  position:absolute;
  bottom:10px;
  right:10px;
}

<div >
  Text text text Text text text Text text text Text text text Text text text Text text text Text text text 
  <button >More</button>
</div>

CodePudding user response：

Use a div to wrap the content or button and add the CSS styling given below, it should push the content or button to the right side.

.More-div {
 display: flex;
 justify-content: flex-end;
}

Share your CSS codes so that it will be easier to add or modify the CSS styling.

For reference I have added snippet.

.container{
  border: 1px solid #000;
  display: flex;
  flex-direction: column;

}

.more-wrapper{
  display: flex;
  justify-content: flex-end;
}

<div >
  <div class='text-wrapper'>
        Text text text Text text text Text text text Text text text Text text text Text text text Text text text 
  <div>
  <div class='more-wrapper'>
    <button>More</button>
  </div>
  
</div>