JSFiddle - React, Tailwind, and code Playground

HTML

<form id="unitChooser">
    <label>Inches or centimetres?</label>
    <input class="unitSelectInches" type="radio" name="units" value="inches" />Inches
    <input class="unitSelectCenti" 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]").click(function() {
    var value = $(this).val();
    if(value == 'inches')
        $('div.inchesUser').show(200);
    if(value == 'cms')
        $('div.centimetreUser').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);
});