align-items
HTML
<div class="container">
<div class="row">
<div class="sideLeft"></div>
<div class="sideRight">
<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;
justify-content: flex-end; /* NEW */
}
.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;
}