Как правильно выровнять элементы в макете flexbox?

Question

У меня есть простой раздел, в котором я хочу отобразить данные одежды, вот что я хотел бы иметь:

ОБНОВЛЕНИЕ Объяснение того, что я хочу.

Я не могу выровнять элементы с правой стороны, как показано на рисунке выше; Я пробовал несколько разных способов, но ничего не получалось. Что мне нужно сделать, чтобы получить то, что я хочу, используя flexbox?

.data{
  display: flex;
  justify-content: space-between;
}
.data-right{
  display: flex;
  flex-direction: row;
}
.data-top-right-top_right{
  display: flex;
  justify-content: flex-end;
}

<div class="data">
   <div class="data-left">
      <div clas="data-left-top">
         <p>
            jest tekstem stosowanym 
         </p>
      </div>
      <div clas="data-left-bottom">
         <p>
            jest tekstem stosowanym 
         </p>
      </div>
   </div>
   <div class="data-right">
      <div class="data-right">
         <div clas="data-right-top">
            <div class="data-right-top_left">
               <a href="https://ibb.co/em6zfK"><img src="https://thumb.ibb.co/em6zfK/piekna_bestia.jpg" alt="piekna_bestia" border="0"></a>
            </div>
            <div class="data-right-top_right">
               <ul>
                  <li>Calvin Clain</li>
                  <li>SM</li>
                  <li>200</li>
               </ul>
            </div>
         </div>
         <div clas="data-right-bottom">
            <ul>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
            </ul>
         </div>
      </div>
   </div>
</div>

Вот мое демо JSFiddle: https://jsfiddle.net/Mwanitete/ypv1cur6/19/

Примечание: данные, показанные в JSFiddle, только для демонстрационных целей; это не реальный код, который будет отображаться так же, как на картинке выше.

Answer 1

Возможно, вам не хватает какой-либо ширины и настройки сгибания / обтекания:

.data {
  display: flex;
  justify-content: space-between;
}
/* added */
.data-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.data-right-top {
  display: flex;
}

.data-right-bottom {
  width: 100%;
}
/* end update */

.data-top-right-top_right {
  display: flex;
  justify-content: flex-end;
}

<div class="data">
  <div class="data-left">
    <div clas="data-left-top">
      <p>
        jest tekstem stosowanym
      </p>
    </div>
    <div clas="data-left-bottom">
      <p>
        jest tekstem stosowanym
      </p>
    </div>
  </div>
  <div class="data-right">
    <div class="data-right">
      <div class="data-right-top">
        <div class="data-right-top_left">
          <a href="https://ibb.co/em6zfK"><img src="https://thumb.ibb.co/em6zfK/piekna_bestia.jpg" alt="piekna_bestia" border="0"></a>
        </div>
        <div class="data-right-top_right">
          <ul>
            <li>Calvin Clain</li>
            <li>SM</li>
            <li>200</li>
          </ul>
        </div>
      </div>
      <div class="data-right-bottom">
        <ul>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/ypv1cur6/38/