Aligment of divs - html

Question

Have a couple of questions:
How can I do to have my request div and my Languages Div right to the bottom with the red line no matter the size of the divs above them.
How can I make the Name and Rating divs to be align vertically to the middle of the picture?
Here is my code, JSFiddle (https://jsfiddle.net/samuvk/jejjzjjq/1/) and the result
This is my desired result:
I would really appreciate any help.
#menucontainer {
border: 1px red solid;
overflow: auto;
}
.middledividermenu {
width: 39%;
float: left;
border: 1px green solid;
overflow: auto;
}
.pictureleft {
padding: 0.5em 0.5em 0.5em 0.5em;
width: 19%;
float: left;
border: 1px green solid;
overflow: auto;
}
.rightdivider {
width: 40%;
float: left;
border: 1px green solid;
overflow: auto;
}
.namemiddledivider {
width: 70%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 1.8em;
}
.description {
width: 99%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color:grey;
}
.request {
width: 99%;
float: left;
border: 1px blue solid;
text-align: center;
}
.littlepicture {
width: 15%;
float: left;
border: 1px blue solid;
}
.languagecallout {
padding: 0em 0.5em 0em 0.5em;
width: 10%;
float: left;
border: 1px blue solid;
}
.name {
width: 20%;
float: left;
border:1px solid blue;
vertical-align: middle;
}
.rating {
width: 57%;
float: left;
border:1px solid blue;
height:50%;
}
.personrating {
width: 99%;
float: left;
border:1px solid yellow;
vertical-align: middle;
}
.languages {
width: 99%;
float: left;
border:1px solid blue;
}

Answer 1

I edited your fiddle https://jsfiddle.net/jejjzjjq/5/
Use position:relative and position:absolute
Even though your structure is a bit messy, I didn't take time to change it, i only added a few stuff. You really need to review your code entirely!

Answer 2

Does this help? It shows the effect of the spaces between the top divs and the bottom div in a container.
Other notes: I believe that the regular flow of content goes from the top to the bottom and if you want to put a specific piece of content on the bottom or take it out of the regular flow you can use position absolute.
vh is used in my code to get the height so it could fit into the window / view-port nicely.You could make the height to pixels or whatever.
*{
box-sizing:border-box;
}
.container{
height: 100vh;
border-bottom: 3px red solid;
position: relative;
}
.name, .rating, .language, .request{
width: 45%;
border:1px solid blue;
height: 20vh;
}
.name, .request{
float: left;
}
.rating, .language{
float: right;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="name">Name</div>
<div class="rating">Rating</div>
<div class="bottom">
<div class="request">Request</div>
<div class="language">Language</div>
</div>
</div>