JSFiddle - React, Tailwind, and code Playground

by Mani Deep

HTML

<div class="content">
<div id="accordion">  
<h3><a href="#">Section 1</a></h3>
    <div>
        <form enctype="multipart/form-data" method="post" action="somepage.php">
    <div id="form_wrapper">
        <label for="number">Number: </label>
        <input type="text" id="number" name="number" value="" />
        <br />
        <label for="name">Name: </label>
        <input type="text" id="name" name="name" value="" />
        <br />
        <label for="address">Address: </label>
        <input type="text" id="address" name="address" value="" />
        <br />
        <label for="city">City: </label>
        <input type="text" id="city" name="city" value="" />
        <br />
        <div id="image_wrapper">
            <img  src="" alt="photo" />
            <br />
            <label for="photo_desc">Photo Description: </label>
            <input type="text" id="photo_desc" name="photo_desc" value="" />
            <br />
            <label for="new_picture">New Facility Photo:</label>
            <input type="file" id="new_picture" name="new_picture" />
            <br />
        </div>
        <br />
    </div>
    <input type="submit" value="Update" name="update">
</form>
    </div>
    	<h3><a href="#">Section 2</a></h3>
    <div>
    </div>
    	<h3><a href="#">Section 3</a></h3>
    <div>
    </div>
    	<h3><a href="#">Section 4</a></h3>
    <div>
    </div>
</div>
</div>

CSS

* {
    margin:0;
    position: relative;
    font-family: 'Noto Sans', sans-serif;
}

html, body
{
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
}

.content #image_wrapper {
    width: 50%;
    float: right;
    background-color: red;
    position: relative;
}
.content #form_wrapper{
    width: 50%;
    background-color: purple
}


.content input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    vertical-align:middle;
    margin-left:20px;
}

.content label {
    display:inline-block;
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 200px;
}

.content select {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    vertical-align:middle;
    margin-left:20px;
}

.content textarea {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    vertical-align:middle;
    margin-left:20px;    
}
#nav {
    float: left;
    margin: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    min-height: 100%;
    width:15%;
    float:left;
    padding:10px;
    padding-left:10px;
}

.content {
    position: relative;
    width:80%;
    min-height: 100%;
    float:left;
    padding:10px;
    background-color: silver;
    margin-bottom: 60px;
}

JavaScript

$(function() {
    $("#accordion").accordion({ autoHeight: true});
        $("#accordion").accordion({ collapsible: true });
});