Изображение имеет не ту же высоту, что и текст

Question

Я хочу, чтобы изображение было такой же высоты, как и текст. Независимо от того, как долго текст. Я не знаю, где моя ошибка и почему она не работает. Я думаю, что float: left - это проблема. Я использовал Clearfix. Такого не может быть. Flexbox не должен использоваться в этом случае.

Результат должен выглядеть следующим образом:

Это мой код:

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

html{
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

/* *** START: Clearfix *** */
.clearfix::after {
  content:"";
  clear: both;
  display: block;
}
/* *** END: Clearfix *** */


section#test1 {
  background-color: #3d3f45;
  color: #fff;
  margin-bottom: 0;
}

section#test1 div h1 {
  text-align: center;
  font-size: 3rem;
  margin: 3rem 0;
  padding-top: 4rem;
}

section#test1 div p {
  margin-bottom: 1rem;
  padding: 0 2rem;
}

section#test1 p:last-of-type {
  padding-bottom: 4rem;
}

section#test1 .test2 > div {
  display: inline-block;
}

section#test1 .test2 div:first-of-type {
  float:left;
  width: 70%;
}

section#test1 .test2 div:last-of-type {
  float:right;
}

section#test1 .test2 div:last-of-type img {
  height:100%;
  width: auto;
}

<section id="test1">

      <div>
          <h1>Lorem Ipsum</h1>
      </div>


      <div class="test2 clearfix">

        <div>
          <p>Lorem ipsum dolor amet aesthetic forage tumeric kinfolk kickstarter, locavore meditation ugh. Vexillologist art party shoreditch meditation roof party. Beard ethical offal helvetica palo santo austin health goth. Hoodie venmo cold-pressed, green juice adaptogen hexagon neutra portland narwhal kale chips hashtag sriracha put a bird on it tofu. Beard banjo taiyaki readymade 90's, raclette art party irony lyft green juice humblebrag meh.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Etsy mumblecore banh mi banjo church-key +1. Fam YOLO salvia glossier actually affogato. Keytar af vinyl, literally man bun hell of normcore taxidermy lo-fi everyday carry. Iceland pork belly unicorn, pour-over trust fund live-edge brooklyn sustainable occupy truffaut. Banh mi chartreuse small batch photo booth pok pok PBR&B blog, taxidermy locavore. Sriracha farm-to-table scenester, shabby chic before they sold out chartreuse williamsburg coloring book letterpress unicorn hoodie.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
        </div>

        <div>
          <img src="https://www1.xup.in/exec/ximg.php?fid=11811719" alt="Logo">
        </div>

      </div>
  </section>

Answer 1

Все, что вам нужно сделать, это изменить высоту 100% на div родительского изображения. Я дал изображение класса изображению родительского div и высоту тестовому div.

HTML код

<section id="test1">

      <div>
          <h1>Lorem Ipsum</h1>
      </div>


      <div class="test2 clearfix">

        <div class="paragraph">
          <p>Lorem ipsum dolor amet aesthetic forage tumeric kinfolk kickstarter, locavore meditation ugh. Vexillologist art party shoreditch meditation roof party. Beard ethical offal helvetica palo santo austin health goth. Hoodie venmo cold-pressed, green juice adaptogen hexagon neutra portland narwhal kale chips hashtag sriracha put a bird on it tofu. Beard banjo taiyaki readymade 90's, raclette art party irony lyft green juice humblebrag meh.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Etsy mumblecore banh mi banjo church-key +1. Fam YOLO salvia glossier actually affogato. Keytar af vinyl, literally man bun hell of normcore taxidermy lo-fi everyday carry. Iceland pork belly unicorn, pour-over trust fund live-edge brooklyn sustainable occupy truffaut. Banh mi chartreuse small batch photo booth pok pok PBR&B blog, taxidermy locavore. Sriracha farm-to-table scenester, shabby chic before they sold out chartreuse williamsburg coloring book letterpress unicorn hoodie.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
           <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
        </div>

        <div class="image">
          <img src="https://www1.xup.in/exec/ximg.php?fid=11811719" alt="Logo">
        </div>

      </div><!--/test2-->
  </section>

CSS code--

.test2{
  height:800px;
}

.image{
  height:100%;
}