JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>


<aside class="box">
  <article class="box-body">
    <div class="box__img">
  <img src="https://via.placeholder.com/400x339" class="thumbnail" style="
    height: 90px;
">
</div>

<div class="box__meta">
  <h3>ffffffffffffffffffffffffffffffffffffffffffffffffffffff</h3>
  <p><bdi class="box__description"> ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss </bdi></p>
</div>

  </article>
</aside>
 
 
</body>
</html>

CSS

.box .box-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.box__img {
  flex-basis: 15%;
}

.box__meta {
  width: 0;
  flex-basis: 85%;
  margin-right: 15px;
}

 .box__meta p {
    margin: 0;
  }


.box {
  border: 1px solid #e4e4e4;
  padding: 10px;
}






  h3 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    margin: 0px;
    color: $dark-gray;
  }




  .thumbnail {
    width: 150px;
    min-width: 45%;
    min-height: 100px;
  }



.box__description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}