JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ol class="battle">
    <li>
        <input name="radio-1" id="radio-1-1" type="radio" />
        <label for="radio-1-1">Andy Murray</label>
        <input name="radio-1" id="radio-1-2" type="radio" />
        <label for="radio-1-2" class="col-draw">X</label>
        <input name="radio-1" id="radio-1-3" type="radio" />
        <label for="radio-1-3">Djokovic Novak Dvorak</label>
    </li>
    <li>
        <input name="radio-2" id="radio-2-1" type="radio" />
        <label for="radio-2-1">Rafael Nadal Dvorak Qwerty</label>
        <input name="radio-2" id="radio-2-2" type="radio" />
        <label for="radio-2-2" class="col-draw">X</label>
        <input name="radio-2" id="radio-2-3" type="radio" />
        <label for="radio-2-3">Stanislas Wawrinka</label>
    </li>
</ol>

CSS

.battle {
    display: table;
    counter-reset: options;
    width: 250px;
    border-collapse: collapse;
    margin-left: 20px;
}

.battle > li {
    display: table-row;
    padding-left: 20px;
    height: 32px;
}
.battle > li:before {
    counter-increment: options;
    content: counter(options);
    float: left;
    margin-left: -20px;
}

.battle > li > label {
    display: table-cell;
    background-color: #E5E5E5;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
.battle > li > label + input + label {
    border-left: 1px solid #FFF;
}
.battle > li + li > label {
    border-top: 1px solid #FFF;
}
.battle > li > :checked + label {
    background-color: green;
}
.battle > li > input {
    position: absolute;
    left: -9999px;
}
.col-draw {
    width: 35px;
}