Testing Vertically Align Columns

by klode

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">

<div class="yellow">
        <form class="search-form-wrapper inline-bottom">
            <div class="form-inline">
              <div class="form-group" >
                <input type="text" class="form-control" ng-model="vm.searchText" placeholder="Enter a title" required>
              </div>
              <button type="submit"  class="btn btn-primary">Search</button>
            </div>
        </form>
        <div class="add-your-own-wrapper inline-bottom">
        <div class="add-your-own">
          <div class="info-text ">Don't see your book?</div>
          <button type="button" class="btn btn-info" ng-click="vm.goToAddCustomBook()">
            Add Your Own Book
          </button>
        </div>
        </div>
</div>
</div>

CSS

.yellow {
  background: yellow;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.inline-bottom {
      display: inline-block;
    vertical-align: bottom;
}
.inline-middle {
      display: inline-block;
    vertical-align: middle;
}
.search-form-wrapper {
  width: 69%;
}
.search-form-wrapper .form-group{
  width:60%;
}

.add-your-own-wrapper {
  width: 30%;
  text-align: right;
}
.add-your-own-wrapper .add-your-own{
  display: inline-block;
  text-align: left;
}
div {  border: solid 1px black;}