Adapt div width with conversion, rotate and change text

Question

I have a problem with a specific style. I have a “Historic” line in a div with a rotatable CSS transform located on a specific part of the div. If I changed the line to "Historique" (for i18n), move the div.

I want the div to be kept in the same place when the row was changed. Thanks 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>

Run codeHide result

Answer 1

I earned by changing the tag class to read like this. Pay attention to the source conversion 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;