JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <h1>Build a Better Breakfast</h1>
        <h2>Online Breakfast Sandwich Ordering by Doug Mosiondz</h2>
        <div id="left">
            <p>To order your custom-built sandwich, just select from the options below. Select the date you would like your order to be ready for pick-up, and then click the Order button once you&#8217;ve made the sandwich just the way you like it!</p>
            <form action="" method="post">
            <fieldset>
                <legend>Step One: Choose a bread</legend>
                <input type="radio" name="bread" id="engMuff" class="hasVal" value="0.75,120" /> English muffin (add $.75, 120 calories)<br />
                <input type="radio" name="bread" class="reveal" id="bagel" value="1,0" /> Bagel (add $1.00)<br />
                    <fieldset id="bagelOptions" class="hidden">
                        <legend>Select one</legend>
                            <input type="radio" name="bagel" id="bagelWhite" class="hasVal" value="1,310" /> White (310 calories)<br />
                            <input type="radio" name="bagel" id="bagelWheat" class="hasVal" value="1,280" /> Wheat (280 calories)<br />
                    </fieldset>
                <input type="radio" name="bread" class="reveal" id="wrap" value=".65,0"/> Wrap (add $.65)<br />
                    <fieldset id="wrapOptions" class="hidden">
                        <legend>Select one</legend>
                            <input type="radio" name="wrap" id="wrapFlour" class="hasVal" value="0.65,320" /> Flour (320 calories)<br />
                            <input type="radio" name="wrap" id="wrapWheat" class="hasVal" value="0.65,300" /> Wheat (300 calories)<br />
                    </fieldset>
                <input type="radio" name="bread" class="reveal" id="bread" /> Bread (add $.50)<br />
                    <fieldset id="breadOptions" class="hidden">
                        <legend>Select one</legend>
                          ...

CSS

body
{
    font-family: 'Cabin', Helvetica, Arial, sans-serif;
    color: #919B93;
    background-color: #F0CD95;
}

#container
{
    background-color: #fff;
    width: 850px;
    margin: 20px auto;
    padding: 20px;
    height: 100%;
    overflow: hidden;
    border: 6px solid #DBAF72;
}

#left
{
    float: left;
    width: 500px;
    padding: 10px;
}

#right
{
    float: right;
    width: 200px;
}

.rightSection
{
    margin-top: 20px;
    padding: 15px;
    border: 3px dotted #9E805E;
}    

img.right
{
    background-color:#FFFFFF;
}

#imgWrapper
{
    width: 160px;
    height: 120px;
    margin: 2px auto;
}

h1 
{
    font-family: 'Lobster', Georgia, Times, serif;
    font-size:60px;
    color: #545A7C;
    text-shadow: 0px 1px 3px #919B93;
 }

h2
{
    color:#9E805E;
}

h3 
{
    color:#545A7C;
    border-bottom:2px solid #D1D1D1;
    padding-bottom: 3px;
}

h4
{
    color:#545A7C;
    margin:0 0 3px 0;
}

 a 
 {
     color: #526CFF;
     text-decoration:none;
     border-bottom: 1px dotted #526CFF;
 }
     
 a:hover 
 {
     color: #B3BEFF;
     border-bottom: none;
 }    
 
 input 
 {
     margin-bottom: 5px;
 }
 
 input#age
 {
     width:30px;
 }
 
 fieldset
 {
     margin-bottom:15px;
 }
 
 legend
 {
     font-weight: bold;
     color: #198846;
 }
 
 fieldset fieldset legend
 {
     text-transform:capitalize;
     font-variant:small-caps;     
 }
 
 .hidden
 {
     display: none;
 }
 
 label
 {
     display:none;
 }
 
 .rightSection label
 {
     display:block;
 }
 
 .copy
 {
     font-size: 64px;
     font-weight: bold;
     text-shadow: 0px 2px 3px #999;
     color:#ffffff;
 }
 
 table, td
 {
     border: 1px solid #999;
 }
 
 td
 {
     padding: 5px;
     background-color:#fff;
 }
 
 li
 {
     margin-bottom:8px;
 }
 
 .submit
 {
     padding:15px;
     font-size:20px;
     font-weight:bold;
     width:150px;
 }

JavaScript

$(function() {
    var basePrice = 3;
    var taxRate = 0.07;
    $('#tax').text((taxRate * 100).toFixed(2));
    $('.hasVal').click(function() {
        var price, totalPrice, cal, totalCal, tar, optArr;
        totalPrice = basePrice;
        $('.hasVal:checked').each(function() {
            tar = $(this).val();
            optArr = tar.split(',');
            price = parseFloat(optArr[0]);
            totalPrice += price;
            cal = parseFloat(optArr[1]);
            totalCal += cal;
        });
        $('#sub').text(totalPrice.toFixed(2));
        $('#cal').text(totalCal);
        totalTax = totalPrice + (totalPrice * taxRate);
        $('#total').text(totalTax.toFixed(2));
    });

    function calorieCalc(gender, age) {
        //female 19-30: 2000
        //female 31-50: 1800 (-200)
        //female 51-100: 1600 (-400)
        //male 19-30: 2400
        //male 31-50: 2200 (-200)
        //male 51-100: 2000 (-400)
        //either gender 0-18: 1200
        $('#calcResults').slideDown('fast');
    } //calorieCalc
    $('#calc').click(function() {
        //if($('#age').val()
        var ageVal = $('#age').val();
        var genderVal = $('#gender').val();
        //alert('You are a ' + ageVal + ' year old ' + genderVal + '.');
        calorieCalc(genderVal, ageVal);
    });
    $('.reveal').change(function() {
        var rId = $(this).attr('id');
        var fsId = ('#' + rId + 'Options');
        //if($(this).hasClass('reveal')){
        if ($('#' + rId).is(':checked')) {
            $(fsId).slideDown('fast');
        } else {
            $(fsId).slideUp('fast');
        }
    });
});