Icon pushed down following overflow:hidden text

Question

I read this question: Why is this inline-block element pushed downward? and I think I understand the problem, but using any configuration of display isn't working, and vertical-align: top does not seem to solve the baseline issue because the element height is still messed up.

I made a plunker here, to give an example of my problem.

Is there a way to fix the height and keep the overflow:hidden property on the text?

button.overflow p {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}
button.normal p {
  display: inline;
}
button.align i {
  vertical-align: top;
  display: inline-block;
}
button {
  background: black;
  color: white;
  margin: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
  <p>very long button text</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>
<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

Answer 1

* {
  box-sizing: border-box;
}
button {
  max-width: 100px;
}
button p {
  width: 80%;                /* dedicated space for text */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  vertical-align: middle;    /* controls vertical-align of icon */
  margin: 0;                 /* remove default margin */
}
button i {
  width: 20%;                /* dedicated space for icon */
  display: inline-block;
}
button {
  background: black;
  color: white;
  margin: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
  <p>very long button text</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>

<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

jsFiddle