Challenge

How can I get 1) the height of the article tag to match the image next to it and 2) set its text to the center?

by Ken Watanabe

HTML

<div id="container">
  <div class="row">
    <div class="module full">
      <img src="https://s.abcnews.com/images/Lifestyle/puppy-ht-3-er-170907_4x3_992.jpg">
    </div>
  </div>
  <div class="row">
    <div class="module half">
      <img src="https://markhamac.com/clients/14633/images/puppy_golden_retriever.jpeg">
    </div>
    <div class="module half">
      <article>How can I get 1) the height of the article tag to match the image next to it and 2) set its text to the center?</article>
    </div>
  </div>
  <div class="row">
    <div class="module half">
      <article>The height of &#60;article&#62; should match the height</article>
    </div>
    <div class="module half">
      <img src="https://s.abcnews.com/images/Lifestyle/puppy-ht-3-er-170907_4x3_992.jpg">
    </div>
  </div>
  <div class="row">
    <div class="module full">
      <img src="https://markhamac.com/clients/14633/images/puppy_golden_retriever.jpeg">
    </div>
  </div>
</div>

CSS

#container { 
  position:relative; 
  max-width:80vw; 
  width:100%;
  margin:0 auto; 
  }

img {
  width:100%; 
  height:auto; 
  display:block; 
  }
  
.row {}

.row::before,
.row::after {
  clear: both;
  content: '';
  display: block;
  }

.module {
  box-sizing: border-box;
  float: left;
  height: auto;
  }

.half {
  width: 40vw;
  }

.full {
  width: 80vw;
  }

article {
  font-size: 1.5vw;
  padding:20px;
  background:#eeeeee;
  text-align:center;
  }