[Support request] 3 column layout within section content. Content is not stretching the height

I try to realise a 3 column layout within a section.
Two Problems:

1. The section’s height does not stretch with the content.
2. The layout is not responsive. If I check it on mobile the columns should stack on top of each other.

I’m a beginner in html/css. here is what I added in the section content area and the custom css:

Section Content:

<div>
<div class="row">
  <div class="column">
    <h2><img src="https://www.sleep-music.co/wp-content/uploads/2019/08/Baby-Sleep-3-Main-Cover-2019_500x500-300x300.jpg" alt="" width="300" height="300" />
<h1>Our Baby Sleep Series</h1>
    <p>Especially designed lullabies for Babys and Toddlers. We add-mixed heart beat and blood circulation sounds to make the baby feel safe and "at home". They are familiar to this ambience from the mother's womb. We also work with our 3-Phase</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>
</div>

Custom CSS (via the simple CSS plugin)
.column {
  float: left;
  width: 30%;
  padding: 10px;
  margin:10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;