JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<br />
<div id="spelplan" class="panel">
<label id="uppgift" class="uppgifter" style="display: inline-block;">Abc</label>
<label id="uppgift2" class="uppgifter" style="display: inline-block;">123</label>
</div>
<div id="svarsPanel" class="panel">
<input id="the_button" type="button" value="click me!" />
</div>
</body>
CSS
*
{
font-family: cursive;
}
.panel
{
border: 1px solid;
}
#spelplan
{
height: 600px;
}
.uppgifter
{
vertical-align: text-bottom;
background-color: yellow;
}
JavaScript
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
height:"500px"}, 4000, "linear", function() {});
});
});