How to fit in small box title and subtitle use css

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.