JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="container">
  <div class="parent">
    <div class="overflow">
      <div class="flex">
        <div class="media">TOTO</div>
        <div class="product">
          <div class="infos">
            <span class="title">sdkjfh qlkdfh qlsjkdfh qsldjkh qlsdkqhlsdkfj hqlsdkfj qh</span>
            mlqkjdf qlsmdkfjmsdflq sdf qsdf<br />
            sdqmlfkqjsmlkjfd qsùldfk qsdlm<br />
          </div>
        </div>
        <div class="price">0.00€</div>
      </div>
    </div>
  </div>
  <div class="brother">Payment zone</div>
</div>
<div class="test">Test</div>

CSS

.container{ display: flex; }

.brother{ width: 35%; }

.parent{ width: 35%; order:2;  background:#FFC;  }

.overflow{ /*overflow-x: hidden;*/ }

.flex{ display: flex; white-space:nowrap; align-items: center }

.media{ padding:5px; height:100px; width:120px; }

.product{ background:#FCC; display: flex; align-items:center; }

.infos{ overflow:hidden; text-overflow:ellipsis; }

.title{ display: block;overflow:hidden; text-overflow:ellipsis;}
.test{
  position: absolute;
  bottom: 8px;
  left: 16px;
  right: 16px;
  width: -moz-available;
  max-width: none;
  background: red;
}