Выровнять макет по столбцу

Question

Я использую bootstrap и пытаюсь создать следующий макет:

Я пробовал

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
      <div>APPLE INC (AAPL)</div>
      <div>NASDAQ</div>
      <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
    </div>
  </div>
</div>

Я пробовал использовать флексбоксы, но мой макет не устраивает.

Как расположить текст рядом с изображением?

Есть предложения что я делаю не так?

Answer 1

Вы были там на 95%. Я закончил это за тебя. На самом деле все, что вам не хватало, это несколько вложенных bootstrap, чтобы сделать col-10, который содержит данные компании, расположенные рядом с lo go.

.name {
  font-size: 2rem;
}

.tv-symbol-icon {
  border-radius: 50%;
  width: 100%;
}

.tv-flag-country {
  margin: 0 0.5em;
  border-radius: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <div class="row">
        <div class="col-sm-2">
          <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
        </div>
        <div class="col-sm-10">
          <div class="row">
            <div class="name">APPLE INC</div>
          </div>
          <div class="row">
            <div>NASDAQ</div>
            <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
            <div>(AAPL)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>