title: line div's up in a colum with 2 on either side of the column
body: <p>I'm trying to get a column of divs to line up like this image where there are 2 separate divs lined up to the left or right of the column (item to right is associated with item 5 in the column and item to the left is associated with item 6)</p>
  
  <p>is there a way to do this with css?</p>
  
  <p><a href="https://i.stack.imgur.com/xTz94.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xTz94.png" alt="enter image description here"></a>
  here is what i have:</p>
  
  <pre><code>&lt;div id="waterfall"&gt;
  &lt;div class="fall" id="water1"&gt;Defaulter’s Initial Margin&lt;/div&gt;
  &lt;div class="fall" id="water2"&gt;Defaulter’s Guaranty Fund Contribution&lt;/div&gt;
  &lt;div class="fall" id="water3"&gt;Clearing House Contribution $20 Million&lt;/div&gt;
  &lt;div class="fall" id="water4"&gt;Guaranty Fund&lt;br&gt;Total Value XX Million&lt;/div&gt;
  &lt;div class="fall" id="water5"&gt;Unfunded contributions - assessment&lt;/div&gt;
  &lt;div class="fall" id="water6"&gt;Service Continuity Phase&lt;/div&gt;
  &lt;div class="fall" id="water7"&gt;Service Closure&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css is this:</p>
  
  <pre><code>.fall {
  overflow:hidden;
  margin: 0 auto 10px;
  color:white;
  text-align:center;
  width: 33%;
  padding: 10px;
  text-transform:uppercase;
  
  }
  #water2:after {
      border-top: 80px solid #0099CC;
      border-left: 60px solid transparent; 
      border-right: 60px solid transparent; 
      bottom: 0px;
      content: "";
      position: absolute;
      left: 45%;
      margin-left: -21px;
      width: 0; 
      height: 0;
  }
  #water1 {background-color:#686868;}
  #water2 {background-color:#797979;}
  #water3 {background-color:#828282;}
  #water4 {background-color:#8B8B8B;}
  #water5 {background-color:#949494;}
  #water6 {background-color:#9D9D9D;}
  #water7 {background-color:#AFAFAF;}
  </code></pre>
  
  <p>thank you for your assistance.</p>