How to fit in small box title and subtitle use css - html

Question

I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.

Answer 1

This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>

Answer 2

Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>