button with two buttons beneath

by Jordan Dayton

HTML

<div id="header">
  <div class="header-text-wrapper">
    <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Gaming/knight-26.png" title="Knight" width="20" />
    <span class="header-text">HOME</span>
  </div>
</div>

<div id="bottom-left">
  <div class="body-text">
    <p>H.Ed</p>
  </div>
</div>

<div id="bottom-right">
  <div class="body-text">
    <p>K-12</p>
  </div>
</div>

CSS

/* ///////// HEADER ///////// */

#header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 60px;
  width: 369px;
  background-color: #58585B;
}

.header-text-wrapper {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: center;
  padding-top: 20px;
}

.icon {
  vertical-align: top;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.header-text {
  vertical-align: middle;
  color: #fff;
  padding: 5px;
}


/* ///////// BODY ///////// */

#bottom-buttons {
  width: 369px;
  height: 30px;
}

#bottom-left {
  border-bottom-left-radius: 5px;
  height: 30px;
  width: 184px;
  background-color: #8a8a8f;
  margin-top: 1px;
  display: inline-block;
}

#bottom-space {
  height: 30px;
  width: 1px;
  margin-top: 1px;
  display: inline-block;
}

#bottom-right {
  border-bottom-right-radius: 5px;
  height: 30px;
  width: 184px;
  background-color: #8a8a8f;
  margin-top: 1px;
  display: inline-block;
  margin-left: -3px;
}

.body-text {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-top: -10px;
}