div icon corner layout with header/footer

My target app uses bootstrap 3, but looking for a non-bootstrap solution.

by Jay Cummins

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Potato Skins</title>
  </head>

  <body>


    <div class="wrapper">
      <div class="header">
        <span class="smiley">😀</span>
        <span>header</span>
        <span class="kissymckissface">😙</span> </div>
      <div class="main">


        <div>
          <p>
            content
          </p>
        </div>

      </div>

      <div class="footer">
        <span class="alien">👽</span>
        <span>footer</span>
        <span class="monkey">🙈</span>
      </div>
    </div>




  </body>

</html>

CSS

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;


  height: 300px;
  width: 300px;
}

.wrapper>* {
  padding: 10px;

  flex-grow: 1;
  flex-basis: 100%
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
  

}

.main {
  text-align: center;
  background: deepskyblue;
}


body {
  padding: 2em;
}


.smiley {
  float: left;
}

.kissymckissface {
  float: right;
}

.alien {
  float: left;
}

.monkey {
  float: right;
}