Vertically aligning selected div - html

Question

Currently, my div content is in horizontal style, I want to make the another div content to be position vertically. For my case i want to vertically align my content1 element
This is how i want the css to look like
This is my html code:
<div id="binder">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
</div>
<div id="sidebar">
</div>
</div>
This the css code:
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#content{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#sideBar{
border:1px solid #3EA99F;
width:450px;
margin:20px;
padding:30px;
background:#3EA99F;
}
How to do it?

Answer 1

Eventually you can do it without using flexbox too.
Code example:
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.content-wrapper,
#sidebar{
float: left;
}
.content-wrapper{
width:70%;
}
#content,
#content1,
#sidebar {
border: 1px solid red;
}
#sidebar {
width: 30%;
}
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Content div</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
<h3>
Content1 div
</h3>
</div>
</div>
<div id="sidebar">
<h3>
Sidebar div
</h3>
</div>
</div>
Notes
I added a .container-wrapper div as parent of both #content and #content1
I placed .container-wrapper and #sidebar next to each other with float:left
In this case the height of the containers is set automatically based on their content, but if you want you can specify a fixed value adding a height:..px to the corresponding class/id

Answer 2

change
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
to
#binder{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
as the explanation is not much enough, please check the JsFiddle and please explain if it is not as you expected
EDIT:
Thank you for providing the images.
change the html into
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
CONTENT 1
</div>
</div>
<div id="sidebar">
SIDEBAR
</div>
change the css to
#binder{
display:flex;
flex-direction: row;
}
.content-wrapper{
display:flex;
flex-direction: column;
}
#sidebar{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
check the jsFiddle for more