JSFiddle - React, Tailwind, and code Playground

by Júlio Moreira

HTML

<li class="select skuList item-dimension-Tamanho"><span class="group_0"><input name="293_Tamanho" dimension="Tamanho" data-value="P(S)" data-dimension="Tamanho" class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Ps change-image" id="293_Tamanho_0" value="P(S)" specification="Ps" type="radio"><label for="293_Tamanho_0" class="dimension-Tamanho espec_0 skuespec_Ps skuespec_Tamanho_opcao_P(S) skuespec_Tamanho_opcao_Ps">P(S)</label><input checked="checked" name="293_Tamanho" dimension="Tamanho" data-value="M(M)" data-dimension="Tamanho" class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Mm change-image checked sku-picked" id="293_Tamanho_1" value="M(M)" specification="Mm" type="radio"><label for="293_Tamanho_1" class="dimension-Tamanho espec_0 skuespec_Mm skuespec_Tamanho_opcao_M(M) skuespec_Tamanho_opcao_Mm checked sku-picked">M(M)</label><input name="293_Tamanho" dimension="Tamanho" data-value="G(L)" data-dimension="Tamanho" class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Gl change-image" id="293_Tamanho_2" value="G(L)" specification="Gl" type="radio"><label for="293_Tamanho_2" class="dimension-Tamanho espec_0 skuespec_Gl skuespec_Tamanho_opcao_G(L) skuespec_Tamanho_opcao_Gl">G(L)</label><input name="293_Tamanho" dimension="Tamanho" data-value="GG(XL)" data-dimension="Tamanho" class="skuselector-specification-label input-dimension-Tamanho sku-selector skuespec_Ggxl change-image" id="293_Tamanho_3" value="GG(XL)" specification="Ggxl" type="radio"><label for="293_Tamanho_3" class="dimension-Tamanho espec_0 skuespec_Ggxl skuespec_Tamanho_opcao_GG(XL) skuespec_Tamanho_opcao_Ggxl">GG(XL)</label></span>
</li>

CSS

label, select {
    display: inline-block;
    width: 100px;
}
label {
    position: relative;
    top: -1.2em;
    left: 5px;
}
select {
    margin: 1.5em 0 0 -100px;
}