JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<html>
    <body>
        <div id="myDiv">Textthatis kinda long and is probably overflowinganyway</div>
        <input type="button" id="doIt" value="Run" />
    </body>
</html>

SCSS

#myDiv {
    background-color: red;
    padding: 5px 5px 5px 5px;
    width: -moz-calc(1% + 100px);
    height: 100px;
    -moz-transition: width .8s, height .8s, background-color .8s, padding .8s;
    text-overflow: ellipsis;
    overflow: hidden;
    &.small {
        background-color: green;
        width: -moz-calc(1% + 30px);
        height: 30px;
        padding: 0 0 0 0;
    }
}

JavaScript

$(window).ready(function() {
    $("#doIt").click(function() {
        $("#myDiv").toggleClass("small");
    });
});