Element at the bottom of a container that doesn't overlay text in the container

Question

I want to place a div inside another div to the bottom right of the container. The container will contain text and I don't want the inner div to overlay the text. The inner div must always keep his space but the rest of the outer div will contain text.

This is an illustration of what I mean. Blue is the inner div and the orange is the outer div.

This is what I have till now:

.received_withd_msg { 
  display: inline-block;
  max-width: 65%; 
  min-width: 10%;
 }

.inner {
  position: absolute;
  right: 0px;
  bottom: 5px;
  color: #646464;
  font-size: 10px;
  margin-top: auto;
  padding-left: 12px;
  min-width: 45px;
}

SO is not a free coding service! What have **you** tried so far. Could please share some attempt? — johannchopin, Aug 24 '20 at 13:59

score 0 · Answer 1 · answered Aug 24 '20 at 14:40

Here is simple trick you can insert a div and adjust that div outside but has the same background color as the main on div.container and use pseudo element called before or after after selector to edit some part of that outside div all the text inside the main(div.container) won't overlay the div.inner

example

.container {
  width: 250px;
  height: 255px;
  background: orange;
  position: relative;
  word-break: break-all;
}

.inner {
  width: 30px;
  height: 255px;
  background: orange;
  position: absolute;
  bottom: 0;
  right: -30px;
}

.inner::before {
  content: "";
  width: 30px;
  height: 30px;
  background: blue;
  position: absolute;
  bottom: 0;
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem. lorem Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do lorem ipsum
  <div class="inner"></div>
</div>

Thanks for your answer. The only thing is that space above the inner div isn't being used by the text. Any idea to make the text take that space too? thanks in advance — srzsanti, Aug 25 '20 at 08:26

Element at the bottom of a container that doesn't overlay text in the container

1 Answers1

example