* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0px;
}
.we-adopt {
background-color: #8a8484;
color: #ffffff;
padding: 88px 0px;
height: 100px;
}
.we-adopt-list span {
display: inline-block;
vertical-align: top;
padding: 16px 60px 16px 24px;
background-color: #222222;
color: #ffffff;
width: 100%;
}
.we-adopt-list li {
color: #FFFFFF;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 70px;
text-transform: uppercase;
}
.we-adopt-list ul {
display: inline-block;
transform: rotate(-90deg) translateY(-50%);
position: relative;
left: 50%;
}
.we-adopt-list {
position: relative;
}
.we-adopt-list li:last-child {
margin-bottom: 0px;
}<section class="we-adopt" style="height: 100px;">
</section>
<section class="we-adopt-wrap">
<div class="container">
<div class="we-adopt-list">
<ul>
<li><span>Mental agility</span></li>
<li><span>Emotional agility</span></li>
<li><span>Trust</span></li>
</ul>
</div>
</div>
</section>When I use the transform- rotate property on my list section, it sometimes overlaps or takes space from the content above.
Scenario 1
https://i.sstatic.net/t9vp1.png
Scenario 2
https://i.sstatic.net/i3Xds.png
After applying transform- rotate, I want the list section to start just below the grey section with no spacing as shown in the image below.
Expected Outcome
https://i.sstatic.net/gZqQE.png
Is there another way to achieve this design?