title: Responsive Element Resizing
body: <p>I'm in the process of building a simple responsive website and need some guidance.
  I am happy with how my page looks in maximal screen size, however when you resize the browser window smaller the paragraph and image don't scale well together. The image shrinks in size whilst the paragraph grows in height, leaving an uneven look which looks tatty. I have tried for a couple of hours to make this look better now, to no prevail. Does anyone have any suggestions to make this look better until it hits the breakpoint? Was wondering about somehow making the paragraph box grow in width, so it extends horizontally into the image instead of in height? Not sure this will work though. Coding snippets below. Thank you very much.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    text-align: center;
  }
  
  .container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
  
  /* HOME-MAIN */
  
  @media (min-width: 60rem) {
    .main-para {
      float: left;
      width: 30%;
      background-color: #000;
      color: #fff;
      line-height: 1.5em;
      font-size: 1.4em;
      padding: 2em 1em 2.15em;
      margin: 0 0 1em;
      border-top-left-radius: 1em;
      border-bottom-left-radius: 1em;
    }
    .main-image {
      border-top-right-radius: 1em;
      border-bottom-right-radius: 1em;
      float: right;
      width: 70%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;section class="home-main"&gt;    
      &lt;p class="main-para"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ipsum non ex luctus pulvinar pharetra sed orci. Morbi interdum ut massa nec cursus. Sed a justo pretium, pulvinar ante a, volutpat justo. Nulla efficitur faucibus lorem. Duis rhoncus auctor rutrum. Maecenas ac consequat eros, vel tempor tortor. Vestibulum ante ipsum primis in faucibus orci.&lt;/p&gt;  
      &lt;img src="http://placehold.it/300x200" alt="" class="main-image"&gt;
    &lt;/section&gt;        
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>