JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#demo">+</button>
				<div id="demo" class="collapse in width" style="background-color:yellow;">
					<div style="padding: 0; overflow:hidden;">
                       <button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-star"></span> Star</button>
                        <button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-star"></span> Star</button>
                        <button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-star"></span> Star</button>
                        <button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-star"></span> Star</button>
					</div>
				</div>

CSS

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}