jPGYqN

index.html

<section class="body">
  <div class="item flex">
    
    <div class="flex-item">
      <div class="image-container">
      </div>
    </div>
    
    <div class="content-container flex-item">
      <div class="flex vertical">
        <div class="flex-item">
          <div class="flex">
            <div class="title">
              <h3 class="text">&nbsp;</h3>
              <h3 class="text">&nbsp;</h3>
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex">
            <div class="content">
              <h2 class="text">&nbsp;</h2>
              <p class="text">&nbsp;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</section>


<section class="bodyTwo">
  
  <div class="flex horizontal">
    <!-- Green Box (left) -->
    <div class="flex-item">
      <div class="image"></div>
    </div>
    
    <!-- Blue Box (right) -->
    <div class="flex-item">
      <div class="content full-height">
        <!-- Blue Box (right) -->
        <div class="flex vertical">
          <div class="flex-item">
            <span class="flex horizontal">
              <h2 class="flex-item">Title</h2>
              <h2 class="flex-item">Tweet</h2>
            </span>
          </div>
          <h2>This is for all the marbles</h2>
        </div>
      </div>
    </div>
    
  </div>
  
</div>

jPGYqN.markdown

jPGYqN

A Pen by Captain Anonymous on CodePen.

License.

style.css

.body {
  display: block;
  display: none;
  width: 900px;
  margin: 0 auto;
  border: 1px solid #eee;
  height: 100%;
  
  
  div {
    padding: 10px;
  }

  // Flex Things
  .flex {
    display: flex;

    &:not(.vertical) {
      justify-content: space-between;
      flex-flow: row wrap;
      align-items: stretch;
    }

    &.vertical {
      flex-direction: columns;
      .flex-item {
        flex: 1 100%;
      }
    }

    .flex-item {
      flex: 1;
      justify-content: space-between;
      background: lightgreen;
      flex-grow: 1;
      &:last-child {
        background: lightblue;
        flex-grow: 2;
      }
    }
  }


  .image-container {
    height: 300px;
    background: rgba(0,0,0,0.125);
  }
  .title {
    background: rgba(0,0,0,0.125);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .content {
    display: block;
    width: 100%;
    padding: 0;
    align-self: flex-end;
  }
  .text {
    background: rgba(0,0,0,0.125);
    min-width: 100px;
  }
  
}



// Second try
.bodyTwo {width: 900px;
  margin: 10px auto;
  border: 1px solid #eee;
  display: block;
  height: 100%;
  box-sizing: border-box;
  
  
  div {
    padding: 10px;
  }

  // Flex Things
  .flex {
    display: flex;
  }
  
  .horizontal {
    .flex-item {
      flex: 1;
      justify-content: space-between;
      background: lightgreen;
      flex-grow: 1;
      &:last-child {
        background: lightblue;
        flex-grow: 2;
      }
      div {
        background: rgba(0,0,0,0.125);
      }
    }
  }
  
  .vertical {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    > .flex-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: lightgreen;
      &:last-child {
        background: pink;
      }
      div {
        background: rgba(0,0,0,0.125);
      }
    }
  }
  
  .image {
    height: 300px;
  }
  .full-height {
    height:300px;
  }
  
}