JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    
    <div class="selector" id="left"><span class="letter" id="small">A</span></div>
    <div class="selector" id="right"><span class="letter" id="big">A</span></div>
    
    </div>

CSS

#wrapper { width: 100px; margin: 100px auto; }
.selector { height: 26px; width: 30px; display:inline-block; cursor:default; }
.selected { border: 1px solid #8f8f8f;  box-shadow: inset 0 1px 1px 1px rgba(204,204,204,0.7); }
#left.selector.selected { border-radius: 5px 0 0 5px; }
#right.selector.selected { border-radius: 0 5px 5px 0; }
.letter { display:block; font-family: Palatino Linotype;  }
.letter#big { font-size:14pt; line-height:21pt; margin: 0 7px; }
.letter#small { font-size:12pt; line-height:18px; }

JavaScript

$(document).ready(function () {
            $(function () {
                $('.selector').click(function () {
                    $(this).toggleClass("selected");  
                    $(this).siblings().removeClass("selected");
                });
            });
        });