title: Aligning a 90 degree flipped div with a regular horizontal div
body: <p>Is it possible to put a 90 degree flip a div next to a normal horizontally?</p>
  
  <p>In my example, I want the blue div ("some text") to be vertical and be next to the horizontal "<code>bottom-right</code>" div.  Is it possible to do so while making it responsive?  I don't want just the text to be flipped, I want any items I put inside that div to also be flipped.</p>
  
  <p><a href="https://jsfiddle.net/duah6svr/1/" rel="nofollow noreferrer">https://jsfiddle.net/duah6svr/1/</a></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>*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  .big-div{
    width:600px;
    height:600px;
    background:gray;
  }
  .top{
    float:right;
    height:30%;
    background:red;
    width:80%;
  }
  .bottom{
    width:100%;
    height:70%;
    background:green;
    float:right;
  }
  .bottom-right{
    float:left;
    height:100%;
    width:80%;
    background:pink;
  }
  .vertical-invert{
    width:20%;
    height:100%;
    background:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="big-div"&gt;
    &lt;div class="top"&gt;
      
    &lt;/div&gt;
    &lt;div class="bottom"&gt;
      &lt;div class="vertical-invert"&gt;SOME TEXT&lt;/div&gt;
      &lt;div class="bottom-right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>