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

Question

В настоящее время это выглядит так: https://jsfiddle.net/r8zgokeb/1/ Тем не менее, я пытаюсь разместить еще одно маленькое изображение под текстом, но я хочу, чтобы оно начиналось прямо под текстом. Следовательно, изображение под текстом не должно go проходить за нижнюю часть левого изображения.

HTML:

  <div class="image-txt-container">
      <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
      <h2>
        Text here
      </h2>
    </div>

CSS:

.image-txt-container {
  display:flex;
  align-items:center;
  flex-direction: row;
}

Answer 1

Привет, думаю, что это один из способов сделать

HTML

<div class="image-txt-container">
  <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
  <h2>
    Text here
  </h2>
  <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>

CSS

.image-txt-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-auto-flow: row;
}

.image-txt-container img:nth-child(3) {
  grid-column-start: 2;
}

Answer 2

Вот простой код (не flex, а float первого img):

  <div class="image-txt-container">
   <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
   <h2>Text here</h2>
   <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
  </div>

И CSS:

.image-txt-container {
width: 100%;
}

.image-txt-container img:first-child {
  float: left;
  padding-right: 40px;
  width: 450px;
}

.image-txt-container img:last-child{
  max-width: 50px;
}