title: I am trying to make a responsive rectangle with an image to the left inside and text centered
body: <p>I am trying to make a responsive tweet <code>button</code> with the twitter bird <code>float</code>ed left, the text next to it and centered. </p>
  
  <p>My code is:</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>.flex-rectangle {
    float: left;
    margin: 0 5px;
    max-width: 500px;
    text-align: center;
    width: 200%;
    background: #FFFFFF;
    border: 7px solid #00A5EF;
  }
  /* Styles Twitter Bird png */
  
  .image-wrapper {
    padding-top: 10%;
    position: relative;
    width: 100%;
    padding-bottom: 10%;
  }
  img .tweet {
    float: left;
  }
  /* Tweet This: */
  
  .span-content {
    display: block;
    color: #00A5EF;
  }
  .span {
    display: block;
    text-align: center;
    font-family: OpenSans;
    font-size: 36px;
    color: #00A5EF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-rectangle"&gt;
    &lt;div class="image-wrapper"&gt;
      &lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="buttons"&gt;
    &lt;div class="span-content"&gt;
      &lt;span&gt;Tweet This&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  CSS</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried pretty much everything under the sun.</p>
  
  <p>I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.</p>
  
  <p>I understand CSS less than I do JavaScript at this point. Not sure if I should use <code>flexbox</code> in this instance or how I would do that.</p>
  
  <p>Here is the <a href="http://codepen.io/twhite96/pen/aZmrXO?editors=1100" rel="nofollow">CodePen</a></p>