angular md-input-container resizes
<p>I had a leftover project passed to me and I don't originally know how to use angular-md and I am used to with bootstrap. Why is my md-input-container always resize when the height of the table below increase? How to make it static and no resizes will occur when the table below resizes?</p>

<p><strong>from:</strong></p>

<p><a href="https://i.stack.imgur.com/tCSSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tCSSb.png" alt="enter image description here"></a></p>

<p><strong>to:</strong></p>

<p><a href="https://i.stack.imgur.com/ypmU8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ypmU8.png" alt="enter image description here"></a></p>

<p>Check the <strong>description</strong> label</p>

<p>Here is my code:</p>

<pre><code>&lt;h5 class="section-title"&gt;Prize Details&lt;/h5&gt;

&lt;md-input-container flex ng-show="prizeActive"&gt;
    &lt;label for="prize-title"&gt;Title:&lt;/label&gt;
    &lt;input ng-disabled="!editing" id="prize-title" ng-model="prizeTitle" type="text"&gt;
&lt;/md-input-container&gt;

&lt;md-input-container flex ng-show="prizeActive"&gt;
    &lt;label for="prize-description"&gt;Description:&lt;/label&gt;
    &lt;textarea ng-disabled="!editing" id="prize-description" ng-model="prizeDescription" md-maxlength="4096"
              columns="1" rows="5"&gt;&lt;/textarea&gt;
&lt;/md-input-container&gt;

&lt;md-input-container flex ng-show="prizeActive"&gt;
    &lt;md-button id="edit-user" class="md-fab" aria-label="Edit Account Details" ng-click="toggleEditing()" style="background-color: rgb(255,209,0); float:right; margin-top:15px;" &gt;
        &lt;md-icon ng-hide="editing" aria-label="Edit" md-svg-src="icons/ic_mode_edit_white_24px.svg"&gt;&lt;/md-icon&gt;
        &lt;md-icon ng-show="editing" aria-label="Save" md-svg-src="icons/ic_done_white_24px.svg"&gt;&lt;/md-icon&gt;
    &lt;/md-button&gt;
&lt;/md-input-container&gt;

&lt;h5 class="section-title"&gt;High Scores&lt;/h5&gt;

&lt;md-input-container &gt;
  &lt;label for="prize-select"&gt;Prize&lt;/label&gt;
  &lt;md-select ng-model="prizeSelected" id="prize-select" ng-change="updateHighscoreTable()"&gt;
    &lt;md-option ng-repeat="prize in prizes" ng-value="prize"&gt;{{prize.title}} - Ended {{prize.when_ended}}&lt;/md-option&gt;
  &lt;/md-select&gt;
&lt;/md-input-container &gt;

&lt;table class="table table-bordered"&gt;
  &lt;tr&gt;
    &lt;th style="background-color: rgb(255,209,0)"&gt; Name &lt;/th&gt;
    &lt;th style="background-color: rgb(255,209,0)"&gt; Highscore &lt;/th&gt;
    &lt;th style="background-color: rgb(255,209,0)"&gt; When Scored &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr ng-repeat="h in highscores"&gt;
    &lt;td&gt;{{ h.name }}&lt;/td&gt;
    &lt;td&gt;{{ h.score }}&lt;/td&gt;
    &lt;td&gt;{{ h.when_scored }}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Hello World 1&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;2016-06-06&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Hello World 2&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;2016-06-07&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Hello World 3&lt;/td&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;2016-06-08&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;div class="row"&gt;
  &lt;div class="col-lg-12 text-right"&gt;
    &lt;button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000"&gt;End Prize&lt;/button&gt;
    &lt;button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000"&gt;Clear Prize&lt;/button&gt;
    &lt;button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000"&gt;Clear Highscores&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>