Почему мой абзац превышает строку hr, которая находится ниже абзаца при изменении размера?

Question

Проблема в том, что у меня есть изображение на левой стороне моего экрана, и у меня есть абзац с правой стороны моего экрана, и у меня есть линия hr ниже абзаца и изображения. Поэтому всякий раз, когда я изменяю размер окна браузера, абзац просто идет ниже строки hr, потому что он сжимается (сжимается) при изменении размера. Я не хочу, чтобы абзац шел ниже строки hr, даже если я изменяю размер окна браузера. Я хочу, чтобы абзац шел под изображением, но не превышал строку hr. Если вы хотите увидеть, в чем проблема, проверьте мой веб-сайт и измените размер окна браузера, чтобы увидеть проблему.

Ссылка на сайт: http://www.greenfield -school.com / AboutUs.html

Спасибо

Это HTML:

<h3><b>About Us</b></h3>
    <hr style="border: 2px solid green; width: 88%">
    <div class="row2">
  <div class="column2" style="background-color:;">
    <img class="pic img-responsive" src="Icon.jpeg" style="height: 200px; height: 230px">
  </div>
  <div class="column" style="background-color:;">
    <h5 class="welcome"><b>Mission</b></h5>
     <p class="paragraph" style="font-family: book antiqua"><li class="vision1">To care for, respect and encourage all children equally, regardless of gender or ability.</li>
     <li class="vision1">To encourage our pupils to develop a sense of self worth, self discipline, personal responsibility and consideration for others.</li>
     <li class="vision1">To provide an enjoyable, challenging and purposeful atmosphere for our pupils.</li>
     <li class="vision1">To value and encourage the special talents and strengths of pupils.</li></p>

  </div>
</div>

А это CSS:

.vision1 {

    list-style-type: square;
    font-family: book-antiqua;
}

.row2{
  display: flex;
  padding: 2rem 6rem;
}


.column {
  flex: 60%;
  height: 200px; /* Should be removed. Only for demonstration */
}

.column2{
  flex: 0%;
  height: 0px; /* Should be removed. Only for demonstration */
}

h3{
    padding: 5rem 5rem 0rem;
    color: green;
}

Answer 1

Позвольте мне предложить вам альтернативу - я не могу вызвать автоматическую настройку на container height.Но это работает без проблем:

Это ваш HTML:

<div class="container">
  <div class="column one"> Column 1 - this is where your picture is</div>
  <div class="column two"> Column 2 - this is where your paragraph is</div>
</div>
<hr />

Это CSS:

.container{
  width: 100%;
  overflow: auto;
  height: auto;
  clear: both;
  display: block;
}
.column{
  float: left;
}

.column.one{
    //style for column one here
}
.column.two{
    //style for column two here
}

hr{
  clear: both;
}

Это отрегулирует высоту container на основена самой большой высоте: column one или column two

Я проверил этот код здесь CodePen