JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class="form-input-list">
    <div class="item">
        <div class="inner-item">
            <div class="form-element-title">שם פרטי</div>
            <div class="form-element">
                <input type="text" />
            </div>
            <div class="form-element-auto-complete">
                <ul>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                    <li>אופציה ראשונה</li>
                </ul>
            </div>
        </div>
        <div class="inner-item">
            <div class="form-element-title">שם משפחה</div>
            <div class="form-element">
                <input type="text" />
            </div>
            <div class="form-element-auto-complete" id="secondList">
                <ul>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                </ul>
            </div>
        </div>
        <div class="inner-item">
            <div class="form-element-title">שם משפחה</div>
            <div class="form-element">
                <input type="text" />
            </div>
            <div class="form-element-auto-complete" id="secondList">
                <ul>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                    <li>אופציה שנייה</li>
                </ul>
            </div>
        </div>
        <div class="inner-item">
            <div class="form-element-title">שם משפחה</div>
            <div class="form-element">
                <input type="text" />
            </div>
            <div...

CSS

.form-input-list {
    overflow: hidden;
    background-color:#c0c0c0;
    direction:rtl;
    color:#ff0;
}
.form-input-list .item {
    /*float: right;*/
    /*width:100%;*/
    background: #333;
    margin:5px;
}
.form-input-list .item .inner-item {
    margin:2px;
    border:solid 1px #f0f0f0;
    background-color:#00ff00;
    position:relative;
    /*float:right;*/
    display:inline-block;
}
.form-input-list .item .inner-item .form-element {
}
.form-input-list .item .inner-item .form-element-title {
}
.form-input-list .item .inner-item .form-element-auto-complete {
    position:relative;
    display:block;
}
.form-input-list .item .inner-item .form-element-auto-complete ul {
    background-color:#000;
    display:inline-block;
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    height:200px;
    z-index:1111;
}
/*.item:nth-child(3) {
    background: #fff;
    clear:both;
}
.item:nth-child(3):after {
    content:"";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}*/

JavaScript

$(document).ready(function () {
    $('#btn').click(function () {
        $("#secondList").toggle("slow");
    });
}