JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li style="margin-top: 9px;">
        <input type="checkbox" id="price1" value="">
            <label for="price1"><span></span>Se Vende</label>
            </li>
        <li class="price-1" style="display: none;">
            <input type="text" placeholder="Precio de Venta"name="price[sale]" />
            <span class="unit unit-2">&euro;</span>
        </li>
        <li class="test">
            <input type="checkbox" id="price2" value="">
                <label for="price2"><span></span>Se Alquila</label>
                </li>
            <li class="price-2" style="display: none;">
                <input type="text" placeholder="Precio de Alquiler" name="price[rent]" />
                <span class="unit unit-2">&euro;</span>
            </li>
</ul>

CSS

ul{
    padding:1em 0 0;
    max-width: 50%;
    margin: 0;
  border: 1px solid #eee;
}
ul li{
    list-style:none;
    padding: 9px 0px;
    display: inline-block;
    width: 40%;
}
.test {
    display: block;
    margin-top:8px;
}
input[type="text"], textarea {
  padding: 0.8em 1em;
  font-size: 0.85em;
  border: 1px solid #eee;
  color: #a3a3a3;
  background: white;
  outline: none;
  width: 50%;
  -webkit-appearance: none;
}

JavaScript

$(':checkbox').change(function() {
    if ($(this).is('#price1') && $(this).is(':checked')) {
        $('.price-1').toggle();
        $('ul li:last-child').addClass('test');
    }
    else if ($(this).is('#price1')) {
        $('.test').removeClass('test');
        $('.price-1').toggle();
    }
    if ($(this).is('#price2')) {
        $('.price-2').toggle();
    }
});