Having an issue with a particular style here. There's a div containing the string "Historic" that has a CSS transform rotate applied to it and is positioned in relation to another sibling div. When I change the string to "Historique" for internationalization purposes, the positioning of the div shifts.
I'm looking for a solution that will maintain the div in the same position even after changing the string. Any help would be greatly appreciated. Thank you!
#container {
margin: 50px;
position: relative;
width: 300px;
background: #eee;
border: thin solid #bbb;
}
#tag {
position: absolute;
left: -36px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: 15px;
text-transform: uppercase;
max-height: 20px;
}
.content {
display: flex;
position: relative;
padding: 20px;
}<div id="container">
<div id="tag">Historic</div>
<div class="content">a</div>
<div class="content">b</div>
<div class="content">c</div>
</div>