JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<h1>display: inline</h1>
<div>
    Ach, was muß man oft von bösen<br/>
    Kindern hören oder lesen!<br/>
    Wie zum Beispiel hier von diesen<br/>
    Welche <span class="test">Max und Moritz</span> hießen.<br/>
    Die, anstatt durch weise Lehren<br/>
    Sich zum Guten zu bekehren,<br/>
    Oftmals noch darüber lachten<br/>
    Und sich heimlich lustig machten.<br/>
</div>

CSS

h1 { font-size: 20px; font-weight: bold; }
div { border: solid 1px #c0c0c0; padding: 8px; margin: 12px; background-color: #f0f0e9; width: 70% }
.test { display: inline; height: 100px; border: dotted 1px red; background-color: white; }

JavaScript

window.setTimeout(
    function() {
        $("h1").html("display: block");
        $(".test").css("display", "block");
        
        window.setTimeout(
            function() {
                $("h1").html("display: inline-block");
                $(".test").css("display", "inline-block");
            }, 2000);
    }, 2000);