How can I align 2 divs inside another div to the bottom and to the left/right

I have this code

HTML

  <div class="head">
    <div class="menu">
    </div>
    <div class="search">
    </div>
  </div>

CSS

.head {
    height:110px;
    position:relative;
}
.menu {
    float:left;
    position:absolute;
    bottom:0px;
}
.search {
    float:right;
    position:absolute;
    bottom:0px;
}

What I'm trying to do is put the div "menu" at the bottom left of the div "head" and the div "search" at the bottom right of the div "head".

When I use the position and bottom values for "menu" and "head" it aligns the menu perfectly, but when I try the same thing with "search" it throws it on top of "menu" offset a little.

Here is a picture example https://i.sstatic.net/KBUxw.png (the "menu" div aligns correctly but "search" aligns to the left and on top of the "menu" a little higher)

Getting rid of position and bottom values and using just float will align each to their respective sides inline with each other, but it won't put them on the bottom of the parent div.

I've got as far as getting them to align to the sides, but the "search" div is still higher than "menu" (and not on the bottom).

This might be because it has a form in it with a input search field.

Edit1

: I've found out that the problem is that I need to actually align the search box to the bottom of "search". I tried adding this to .searchbox

.searchbox {
  vertical-align:bottom;
}

But this does not work, and neither does bottom:0px;.

Edit2

: I found the solution since I found out what the problem actually was. I had to add this code to a class assigned to the input box

position: absolute;
right:    0;
bottom:   0;

And now it's working perfect. I don't have any other content inside "search" except the box so aligning the div "search" isn't too big of a deal since now the input box is aligning to "head". Thanks everyone!

Solution

I tried doing this and it seemed to work for me in Chrome and Firefox. Also, your second to last closing div needs to be fixed.

Codepen: https://codepen.io/jhhboyle/pen/BZQVvO

Link to another thread that was helpful with the bottom / right / left styling: Put text at bottom of div

HTML:

<div class="head">
    <div class="menu">
      Content
    </div>
    <div class="search">
      COntent
    </div>
</div>

CSS:

.head {
    height:110px;
    position:relative;
    background-color:green;
}
.menu {
    font-size:18px;
    position:absolute;
    bottom:0px;
    background-color:red;
}
.search {
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:blue;
}