使用变换旋转和更改文本来调整宽度div

Question

I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.

I wish the div keep at the same place when string has changed. Thank you for answers.

 #main { 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="main"> <div id="tag">Historic</div> <div class="content">a</div> <div class="content">b</div> <div class="content">c</div> </div> 

Answer 1

I got it working by changing the tag class to read like this. Note the transform-origin option.

transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;