JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div class="inline select-area">
    <input type="text" name="area" placeholder="Sem label error" readonly="readonly" class="select-area-field"/>

    <!-- A Label aparece bem aqui -->

    <ul class="opcoes">
        <li>Opção 1</li>
        <li>Opção 2</li>
        <li>Opção 3</li>
    </ul>
    <input type="hidden" name="cod-area" />
</div>

<div class="inline select-area">
    <input type="text" name="area" placeholder="Com label error" readonly="readonly" class="select-area-field"/>

    <!-- A Label aparece bem aqui -->
    <label class="error">label.error</label>

    <ul class="opcoes">
        <li>Opção 1</li>
        <li>Opção 2</li>
        <li>Opção 3</li>
    </ul>
    <input type="hidden" name="cod-area" />
</div>

CSS

ul.opcoes{
    visibility: hidden;
}

label.error{
    color: red;
}

/* aqui está o segredo da solução */
.select-area-field:focus + ul.opcoes,
.select-area-field:focus + label.error + ul.opcoes{
    visibility: visible;
}