align-items

by rockhammer

HTML

<div class="container">
    
    <div class="row">
    
      <div class="sideLeft"></div>
      
      <div class="sideRight">
        
        <div class="fudgeBox"></div>
      
        <div class="searchForm">
          <input type="text" id="searchString" placeholder="search tweets">
          <input type="submit" id="searchButton" value="submit">
        </div>
        
        <div class="tweetForm">
          <textarea id="tweetBox" rows="5" placeholder="what's happening?"></textarea>
          <input type="submit" id="tweetButton" value="post">
        </div>
        
        <div class="myMsg">hello</div>
      
      </div>
    
    </div>
  
  </div>

CSS

html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: rgba(127,127,127,1.0);
    }
    
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: none;
    }
    
    .container {
      width: 80%;
      height: 80%;
      margin: 0;
      padding: 0;
      background-color: aqua;
    }
    
    .row {
      width: 80%;
      height: 80%;
      margin: 0;
      padding: 0;
      background-color: orange;
      display: flex;
    }
    
    .sideLeft {
      width: 50%;
      height: 90%;
      margin: 0;
      padding: 0;
      background-color: yellow;
      /*display: flex;*/
    }
    
    .sideRight {
      width: 50%;
      height: 90%;
      margin: 0;
      padding: 0;
      background-color: lime;
      -webkit-display: flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-align-items: flex-end;
      align-items: flex-end;
    }
    
    .searchForm {
      width: 100%;
      height: 10%;
      margin: 0;
      padding: 0;
      background-color: bisque;
      display: flex;
      flex-direction: row;
    }
    
    #searchString {
      width: 75%;
      height: 15px;
    }
    
    #searchButton {
      width: 15%;
      height: 15px;
    }
    
    .tweetForm {
      width: 100%;
      height: 25%;
      margin: 0;
      padding: 0;
      background-color: pink;
      display: flex;
      flex-direction: column;
    }
    
    #tweetBox {
      width: 75%;
      margin: 0;
      padding: 0;
      background: none;
    }
    
    #tweetButton {
      width: 15%;
      height: 15px;
    }
    
    .myMsg {
      
    }
    
    .fudgeBox {
      width: 100%;
      background-color: mediumaquamarine;
    }

JavaScript

$(".fudgeBox").height(
      $(".sideRight").innerHeight()
      - $(".searchForm").outerHeight()
      - $(".tweetForm").outerHeight()
      - $(".myMsg").outerHeight()
    );