Chrome browser calculates the wrong element width - html

Question

I am working with the text element that needs to be displayed vertically.
To do so I use the following CSS:
transform: rotate(180deg);
writing-mode: vertical-rl;
However, in Chromium (and other Blink browsers) the width of that element is calculated very weirdly.
To one-time fix that problem there are many ways:
Open DevTools (F12), set fixed width for that element (width: 1px) and disable that option, all goes ok.
Change the window width to a bit smaller.
Play around with the smaller text - delete line breaks (<br>), type in more or less text and etc.
Couldn't recreate the same fixes in JSFiddle. However here it is for you to see what I mean. Try opening it in browser using WebKit and other engine (i.e. Firefox) - there are different results.
https://jsfiddle.net/VoG__/qfkgt7m9/7/
Also I'm using Debian 8, but the problem appears on any OS.
What is the problem? How can I fix this issue using CSS?
.content {
padding: 30px;
background-color: #bbb;
}
.project-info {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
.project-info .item {
border: 3px solid #fff;
display: flex;
flex-wrap: nowrap;
}
.project-info .item .heading {
margin-left: -1px;
margin-bottom: -1px;
padding: 10px;
color: #555;
font-size: 20px;
font-family: sans-serif;
background-color: #fff;
text-align: center;
text-transform: uppercase;
transform: rotate(180deg);
writing-mode: vertical-rl;
}
.project-info .item .text {
padding: 20px;
font-family: sans-serif;
}
<div class="content">
<div class="project-info">
<div class="item">
<div class="heading">Item long text</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
</div>
<div class="item">
<div class="heading">Item</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie malesuada sem, ac elementum justo rhoncus vitae. Morbi nec ex quam. Donec finibus auctor odio, non faucibus ex tristique nec.</div>
</div>
</div>
</div>
Update 29.09.2020
The issue seems to be gone in the latest version of Chrome (and like), can't reproduce it in Firefox as well. Would accept the answer providing a screenshot of how it looked in older versions and telling why could that happen and what exactly fixed it.

Answer 1

Found out that this is something to do with linebreaks / wordbreaks ...
So the first (raw) solution is to keep all the heading text in one line.
.project-info .item .heading {
...
white-space: nowrap;
}
However I'm still looking for a proper answer to allow the heading text stack up in multiple lines.