JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-container">
<a href="#" id="clicker">Click Me</a>
<a href="#" id="compute-height">Get Height</a>
<div>
<h2>Some Label</h2>
<div class="options-group" id="gender-options-group">
<input type="radio" />
<label>Value</label>
<input type="radio"/>
<label>Other</label>
</div>
</div>
</div>
<div id="output"></div>
CSS
input{
display: block;
float: left;
width: auto;
}
label {
display: block;
}
.options-group {
width: 100px;
}
JavaScript
$('#clicker').click(function() {
$('#gender-options-group').toggle();
});
$("#compute-height").click(function() {
var stuff = $(".options-group").eq(0);
$('#output').append("<p>Computed height: " + stuff.height() + "</p>");
});