html - How to change vertical alignment of content with a button element? -

i'm working on project there row of controls, each of button element. there content inside of buttons, , laid out in row flexbox. button element centers content vertically, , can't figure out how override vertically align @ top of button. controls need same height , same width, , clicking anywhere in borders must count click on button.

this codepen shows problem clearly: http://codepen.io/anon/pen/rppqdz

.wrapper {    display: flex;    flex-direction: row;    width: 80%;  }    button,  .object {    font-family: sans-serif;    font-size: 1em;    padding: 1em;    background: #fff;    flex: 1;    border: 1px solid red;    text-align: left;  }

<h1>what looks like</h1>  <div class="wrapper">    <button>i content</button>    <button>i longer content goes here , here</button>    <button>i content</button>  </div>    <h1>what want like</h1>  <div class="wrapper">    <div class="object">i content</div>    <div class="object">i longer content goes here , here</div>    <div class="object">i content</div>  </div>

i realize issue solved not using button elements, feel should able override behavior of button elements. i'd figure out own sanity!

firstly, having h2 , p inside button not valid html.

secondly, there no simple way control position of elements in button, vertically.

but if really must use broken html, , top alignment important, can force elements take fixed heights button align them @ top, so:

button > h2 {     height: 48px; }  button > p {     height: 16px; } 

i must still not same using <div>, don't know if sufficient.

in case, try convince in charge of "larger context of project" use proper valid html.

edit:

if inline elements used inside button, problem becomes more manageable. caveat is: need know beforehand height of button. can simulate top-bottom flow using paddings.

button {     padding-top: 1em;     padding-right: 1em;     padding-bottom: 5em; /* make sure bottom + top padding == height */     padding-left: 1em;     height: 6em; } 

still not ideal - feels heavily plastered hack solution.