<dt> <dd>стайлинг

Question

• Что у меня сейчас есть:

текущее фото текущий код ручки

• Чего я хочу достичь:

Когда текст слева разбит на две строки,

1. Если есть дополнительная вторая строка, я хочу, чтобы обе эти строки были выровнены, как в

, разбитых на первая строка две строки : вторая строка

Если второй строки нет, я хочу, чтобы первая строка находилась на одной линии со второй строкой слева.

с разбивкой на
две строки : первая линия

Возможно, я смог бы добиться этого с помощью flexbox, но я не мог понять, как.

Что я пробовал: HTML

<dl class="list">
  <dt class="imgText">    
    <span>
<img src="https://eastereggs.svensoltmann.de/wp-content/uploads/opera_logo1.gif" alt="Payback">
    </span>

    <span class="text">This text will be broken to have two lines in smaller screens:  </span></dt>

  <span class="values-container"> 

    <dd class="dd">First line [always exists]<br>
 Second line [Optional]
</dd>
</span>

</dl>

CSS

.list {

}

.imgText{
  float:  left;
  max-width: 60%;
}

.imgText img {
  max-width: 80px;
  display: block;
}

.text {
  display: inline;
}

.values-container {
  display: flex;
  flex-direction: column;
  margin-left: 15%;
  text-align: right;
}

.dd{
  margin-left: 15%;
  text-align: right;
}

Answer 1

Это то, что вам нужно ??

.list {
  display: flex;
  justify-content: space-between;
}

.imgText {
  display: flex;
  justify-content: space-between;
  max-width: 60%;
}

.imgText img {
  max-width: 80px;
  display: block;
}

.text {
  margin-left: 10px;
}

.values-container {
  display: flex;
  flex-direction: column;
  text-align: right;
}

<dl class="list">
  <dt class="imgText">
    <span>
      <img
        src="https://eastereggs.svensoltmann.de/wp-content/uploads/opera_logo1.gif"
        alt="Payback"
      />
    </span>

    <span class="text">
      This text will be broken to have two lines in smaller screens:
    </span>
  </dt>

  <span class="values-container">
    <dd class="dd">
      First line [always exists]<br />
      Second line [Optional]
    </dd>
  </span>
</dl>