JSFiddle - React, Tailwind, and code Playground

by aadaam

HTML

<form id="egyik">
    <div>
    <label>Cimzett</label><input>
    </div>
    <div>
    <label>Targy</label><input>
    </div>
    <button id="keres">Keres</button>
</form>
<form id="masik">
    Mentett keresesek:
    <select size=5>
        <option>Egyik mentett</option>
        <option>Masik mentett</option>
    </select>
    <div class="hidden mentes">
    Jelenlegi mentese:
    <label>Nev:</label><input>
    </div>

    <button>Ment</button>
</div>
</form>

CSS

form {
width:50%;
font-family:verdana, sans-serif;

float:left;
    display:block;
height:200px;
}
label {
    font-weight:bold;

width:40%;
text-align:right;
    display:block;
    float:left;
}
div {
height:20px;
    margin-bottom:0.5em;
}
input {
float:left;
    width:50%;
    display:block;
}
#egyik{
}
#masik {
}
#keres {
margin-left:40%;
}
.hidden {
display:none;
}
.mentes {
margin-top:1em;
}
select {
width:90%;
    margin-right:5%;
height:100px;
    margin-top:1em;
}

JavaScript

$(document).ready(function(){
    $('#keres').click(function(e){
        $('.hidden').removeClass('hidden');
        e.preventDefault();
        return false;
    });
})