JSFiddle - React, Tailwind, and code Playground

by drvy

HTML

<div id='type'>
    
    <div class='item'>
        <input type='checkbox' id='price1' value=''>
        <label for='price1'>Se Vende</label>
        <div class='input hide'>
            <input type='text' placeholder='Precio de Venta' name='price["sale"]'>
            <span>&euro;</span>
        </div>
    </div>
            
    <div class='item'>
        <input type='checkbox' id='price2' value=''>
        <label for='price2'>Se alquila</label>
        <div class='input hide'>
            <input type='text' placeholder='Precio de Alquiler' name='price["rent"]'>
            <span>&euro;</span>
        </div>
    </div>
            
</div>

CSS

#type {
    max-width: 50%;
    border: 1px solid #eee;
}

    #type > .item {
        display: block;
        margin: 5px 0px;
        padding: 9px 0px;
    }

    #type > .item > .input { display: inline-block; }
    #type > .item > .hide { visibility: hidden; }

    #type > .item > .input > input[type='text'] {
        padding: 0.8em 1em;
        font-size: 0.85em;
        border: 1px solid #eee;
        color: #a3a3a3;
        background: white;
        outline: none;
        width: 50%;
        -webkit-appearance: none;
    }

JavaScript

$('#type :checkbox').change(function(){
    $(this).parent('.item').find('.input').toggleClass('hide', (!$(this).is(':checked')));
});