JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="form-group"> <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>

    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

<div class="form-group"> <a for="collapse1" data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1">+ Jerky due to min height</a>
    <div class="collapse" id="collapse1" style="padding: 0; min-height:115px;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

<div class="form-group"> <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ Jerky</a>

    <textarea type="text" class="form-control collapse" id="collapseTwo" rows="4" style="padding: 20px;">Padding on animated element</textarea>
</div>

CSS

a {
    display: block;
    background: #eee;
}