Is there a way to make my content expand towards the top instead of bottom? Despite my efforts, the text always ends up at the bottom. Below is the code I'm using:
.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.div {
position: relative;
transition: .35s ease-in-out 0s;
height: 0;
width: 70%;
left: 50%;
top: 100px;
transform: translateX(-50%);
text-align: center;
z-index: 3;
}
.text {
position: relative;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-shadow: 0 0 0 1px black;
line-height: 155%;
padding: 0.2em 0.3em;
color: white;
background-color: black;
background-color: rgba(0, 0, 0, .8);
border-radius: 3px;
font-size: 1.125rem;
}<div class="box">
<div class="div">
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>What I'm looking for as output is:
https://i.sstatic.net/4HiMR.png
Although I have used top: 100px in .div for demonstration purposes, my goal is to have the text aligning to the top consistently. I've experimented with adjusting height, top, and bottom, but haven't had any success. Any suggestions on what steps I should take next? Thank you.