JSFiddle - React, Tailwind, and code Playground

HTML

<form id="unitChooser">
    <label>Inches or centimetres?</label>
    <input class="unitSelectInches" data-class='inchesUser' type="radio" name="units" value="inches" />Inches
    <input class="unitSelectCenti" data-class='centimetreUser' checked="checked" type="radio" name="units" value="cms" />Centimetres</form>
<br />
<div class="centimetreUser">
    <form>
        <label>Cushion size:</label>
        <input id="size" /> <span class="unitLabel">cms</span>

        <br />
        <button type="Submit">Calculate!</button>
    </form>
    <p class="result">You should cut a piece of fabric <span id="outputWidth"></span>cms wide, with a length of <span id="outputLength"></span>cms.</p>
    <p class="result"><strong>Note:</strong> this includes a seam allowance of 1.5cms</p>
</div>
<div class="inchesUser">
    <form>
        <label>Cushion size:</label>
        <input id="size" /> <span class="unitLabel">inches</span>

        <br />
        <button type="Submit">Calculate!</button>
    </form>
    <p class="result">You should cut a piece of fabric <span id="outputWidth"></span>", with a length of <span id="outputLength"></span>".</p>
    <p class="result"><strong>Note:</strong> this includes a seam allowance of 5/8".</p>
</div>

CSS

p.result {
    display:none;
}
div.centimetreUser, div.inchesUser {
    display:none;
}

JavaScript

$('input:radio[name=units]').on('click', function () {
    $('div.centimetreUser, div.inchesUser').hide();
    $('div.' + $(this).data('class')).show(200);
});

var size;
var length;

$("form").submit(function (e) {
    e.preventDefault();
    size = $("#size").val();
    $("#outputWidth").text(parseInt(size) + 3);

    length = $("#size").val();
    $("#outputLength").text(parseInt(((size) / 2) * 5) + 3);

    $('p.result').show(200);
});