JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Example of block vs. inline</h2>
<p>This is a paragraph. By default it is a <q>block</q> element.Following elements move on a new line.</p>
<div>This div is hidden and will be shown only when we click the button to show it. Despite being her, it doesn't take place on the page.</div>
<p>This is another paragraph. An input element, 
    <input type="text"> is instead an example of an <q>inline</q>element. Buttons are <q>inline</q> elements too.</p>
    <button id="b1">Make "p" inline</button>
    <button id="b2">Make "all" block</button>
    <button id="b3">Show/Hide</button>
    <button id="b4">Inline Block</button>
<section>
    <h4>Section 1</h4>
    This is a section. It is by default a block.
    </section>
 <section>
     <h4>Section 2</h4>
    This is another section.
</section>

CSS

p {
    padding: 10px 5px 15px 10px;
    border: 1px solid gray;
}

q {
    font-weight: bold;
}

div {
    display: none;
    background-color: lightpink;
}

section {
    border: 2px dotted red;
}

JavaScript

// event handler for button nr. 1
$("#b1").click(function(){
    $("p").css({'display': 'inline'});
});

// event handler for button nr. 2
$("#b2").click(function(){
    $("p,q,input,button").css({'display': 'block'});
});

// event handler for button nr. 2
$("#b3").click(function(){
    $("div").toggle(); // toggles appearance
    //$("div").show(); // only for showing
    //$("div").hide(); // only for hiding
});

$("#b4").click(function(){
    $("section").css({'display': 'inline-block'});
});