title: Image container not aligning bottom to other grid container
body: <p><a href="https://i.stack.imgur.com/FVSC0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FVSC0.jpg" alt="enter image description here"></a>
  Hello, </p>
  
  <p>As you can see from the photo above, I am trying to achieve a grid system. First grid is 3 images, second grid is a column, and third grid is a large image floated to the right of the 2nd grid. You can see this photo on my portfolio website: <a href="http://www.irwinlitvak.com" rel="nofollow noreferrer">http://www.irwinlitvak.com</a> </p>
  
  <p>I have three images in the first grid that have a width of 31.33% and the first and second img have a margin-right of 3.005% to full up the container width.</p>
  
  <p>In the next grid (grid-2), I have a two of my images floated left in a column and (grid-2-of-3) is floated right with a width of 65.556%.</p>
  
  <p>I would like the top and bottom of the larger image to take up the full height of the grid, so the bottom of the big image aligns with the self-destructing box. </p>
  
  <p>Here is the HTML &amp; CSS: </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>.projects-grid {
    margin: 100px auto 0;
    width: 90%;
  }
  
  .projects-grid .title {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .projects-grid h1 {
    display: inline-block;
    font-family: "Montserrat";
  }
  
  .grid-1 {
    margin-bottom: 4%;
  }
  
  .grid-1-of-3 {
    position: relative;
    width: 31.33%;
    float: left;
    overflow: hidden;
  }
  
  .grid-2-of-3 {
    position: relative;
    width: 65.556%;
    float: right;
  }
  
  .grid-1-of-3:first-child,
  .grid-1-of-3:nth-child(2) {
    margin-right: 3.005%;
  }
  
  .grid-3 {
    position: relative;
    display: inline-block;
    width: 33%;
    margin-bottom: 60px;
    vertical-align: bottom;
  }
  
  .grid-5 {
    position: relative;
    display: inline-block;
    width: 20%;
    margin-bottom: 60px;
    vertical-align: bottom;
  }
  
  .box-1 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .grid-1-of-3:first-child {
    margin-left: 0;
  }
  
  .grid-1-of-3:last-child {
    margin-right: 0;
  }
  
  .big-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .grid-2 {
    width: 31.33%;
    float: left;
  }
  
  .grid-2 .box-cont {
    width: 100%;
  }
  
  .grid-2 .box-cont:first-child {
    margin-bottom: 4%;
  }
  
  .grid-2 .box-cont {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="projects-grid clearfix"&gt;
  
    &lt;div class="row title"&gt;
      &lt;h2&gt;Projects&lt;/h2&gt;
    &lt;/div&gt;
  
    &lt;div class="grid-1 clearfix"&gt;
      &lt;div class="grid-1-of-3"&gt;
  
        &lt;div class="box-1"&gt;
          &lt;a href=""&gt;
            &lt;img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic"&gt;
          &lt;/a&gt;
          &lt;a href="https://budget-app-x.herokuapp.com/" target="_blank"&gt;
            &lt;div class="box-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;Budget-App-X&lt;/h3&gt;
                &lt;p&gt;Manage your incomes and expenses in a fun and easy app.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;h3&gt;
          &lt;a href="https://budget-app-x.herokuapp.com/" target="_blank"&gt;Budget-App-X&lt;/a&gt;
        &lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="grid-1-of-3"&gt;
        &lt;div class="box-1"&gt;
          &lt;a href=""&gt;
            &lt;img src="/assets/dice-game-x-ps.jpg" alt="dice-game"&gt;
          &lt;/a&gt;
          &lt;a href="https://dice-game-x.herokuapp.com/" target="_blank"&gt;
            &lt;div class="box-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;Dice-Game&lt;/h3&gt;
                &lt;p&gt;Roll the dice. Test your luck and see who racks the most points.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;h3&gt;
          &lt;a href="https://dice-game-x.herokuapp.com/" target="_blank"&gt;Dice-Game&lt;/a&gt;
        &lt;/h3&gt;
  
      &lt;/div&gt;
  
      &lt;div class="grid-1-of-3"&gt;
        &lt;div class="box-1"&gt;
          &lt;a href=""&gt;
            &lt;img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer"&gt;
          &lt;/a&gt;
          &lt;a href="http://pomodoro-app-timer.herokuapp.com" target="_blank"&gt;
            &lt;div class="box-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;Pomodoro-Timer&lt;/h3&gt;
                &lt;p&gt;A quick and easy solution to being productive. Set the time and get things done.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;h3&gt;
          &lt;a href="http://pomodoro-app-timer.herokuapp.com" target="_blank"&gt;Pomodoro-Timer&lt;/a&gt;
        &lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="grid-2 clearfix"&gt;
  
      &lt;div class="box-cont"&gt;
        &lt;div class="box-1"&gt;
          &lt;a href=""&gt;
            &lt;img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me"&gt;
          &lt;/a&gt;
          &lt;a href="http://www.cucumberme.com" target="_blank"&gt;
            &lt;div class="box-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;CucumberMe&lt;/h3&gt;
                &lt;p&gt;CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.&lt;br&gt;&lt;br&gt; Go and send one today! &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;h3&gt;
          &lt;a href="http://www.cucumberme.com" target="_blank"&gt;CucumberMe&lt;/a&gt;
        &lt;/h3&gt;
  
      &lt;/div&gt;
  
      &lt;div class="box-cont"&gt;
        &lt;div class="box-1"&gt;
          &lt;a href="#"&gt;
            &lt;img src="/assets/self-destruct-x-ps.jpg" alt="to do list"&gt;
          &lt;/a&gt;
          &lt;a href="http://todos-irwin.herokuapp.com/" target="_blank"&gt;
            &lt;div class="box-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;Self Destructing To-Do-List&lt;/h3&gt;
                &lt;p&gt;A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;h3&gt;
          &lt;a href="http://todos-irwin.herokuapp.com/" target="_blank"&gt; 
                                  Self Destructing To-Do-List
                              &lt;/a&gt;
        &lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="grid-2-of-3 clearfix"&gt;
      &lt;div class="box-cont"&gt;
        &lt;div class="big-box"&gt;
          &lt;a href="#"&gt;
            &lt;img src="/assets/omnifood-x-ps.jpg" alt="omnifood"&gt;
          &lt;/a&gt;
          &lt;a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank"&gt;
            &lt;div class="box-overlay big-overlay"&gt;
              &lt;div class="text-overlay"&gt;
                &lt;h3&gt;Omnifood&lt;/h3&gt;
                &lt;p&gt;My version of the food app Blue Apron. Take a look! &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;h3&gt;
          &lt;a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank"&gt;
                                  Omnifood
                              &lt;/a&gt;
        &lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>