При изменении размера окна сделать текстовое поле ниже, чем изображение

Question

Я прочитал один из предыдущих вопросов о том, как сделать так, чтобы текст проходил под изображением, но это не сработало так, как я хочу.

Я пытаюсь сделать текстовое поле поверхобраз.вот так

Я использую wpbakery в WordPress, это CSS, и я не знаю, будет ли хорошей идеей написать CSS так.На планшетах прямоугольник прямо на изображении, на мобильном телефоне текст исчезнет.

Проблема в том, что при изменении размера окна он идет прямо на изображение.Как сделать так, чтобы текст шел ниже изображения, когда размер окна меньше рабочего стола.

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: pink;
  color: white;
  float: bottom;
  padding-left: ;
  padding-right: 30%;
}

<div class="container">
  <img src="https://sijour.com/wp-content/uploads/2019/06/home-page.jpeg" alt="kids-clothes" style="width:50%;">

  <div class="text-block" style="margin-right:20%; margin-bottom:70px;">

    <p class="w3-margin" style="color: #9999;"> Kids clothes</p>
    <hr class="w3-margin">
    <h2 class="w3-margin"><b>Prens bebe</b></h2>
    <p class="w3-margin">Visit our Store online</p>
    <br>
    <div class="w3-button w3-round-large w3-pink w3-margin"> View more </div>
  </div>
</div>