将 div 扩展到段落子级增长的右侧

Question

If i have a paragraph inside a div, is it possible to make the div expand to the left instead of to the right, when the paragraph gets longer? I know there are several threads on this, and i have tried with direction: rtl etc, but nothing seems to work for me.

Here is some code.

https://codepen.io/haa123/pen/oNxaqwE

HTML:

<div id="container">  
  <div id="container1">
    <p>Lorem ipsum</p>
</div>
<br>
<div id="container2">
    <p>Expanding to the right</p>
</div>

CSS:

#container {
  position: absolute; left: 50%;
}

#container1 {
  background-color: red;
  display: inline-block;
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

Here are some photos to illustrate.

This is what I have at the moment:

This is what I want to achieve:

Thanks!

Answer 1

use css grid:

<div class='container'>
  <div></div>
  <div><p>lorem ipsum</p></div>
  <div><p>expand</p>
</div>

Answer 2

You can use display flex in your container

 #container { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: flex-end; } #container1 { background-color: red; display: inline-block; } #container2 { margin-top: 5px; background-color: red; display: inline-block; }

 <div id="container"> <div id="container1"> <p>Lorem aaabcdedfqafasafasfafasf</p> </div> <br> <div id="container2"> <p>Expanding to the right asadasdsaqweqweqweqe</p> </div> </div>

Answer 3

I do not know why you used Position:absolute; But if it is really necessary to use it, just by giving text-aligen: right; to your #container , your paragraph will be rtl.

 #container { position: absolute; left: 50%; text-align: right; } #container1 { background-color: red; display: inline-block; } #container2 { margin-top: 5px; background-color: red; display: inline-block; }

 <div id="container"> <div id="container1"> <p>Lorem ipsum</p> </div> <br> <div id="container2"> <p>Expanding to the right</p> </div>

Answer 4

.bricklet {text-align: right}
.bricklet .content {display: inline-block}
.bricklet .content.hidden {display: none}

<div class="bricklet">
  <div>Expander</div>
  <div class="content hidden">Expanded content</div>
</div>