JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="container">
        <div id="formContainer">
            <p class="inline">Measurement units</p>
            <input type="radio" name="radioMeasurement" id="radioMetric" value="metric" onchange="radioChange()" checked=""></input>
            <label for="radioM">metric</label>
            <input type="radio" name="radioMeasurement" id="radioImperial" value="imperial" onchange="radioChange()"></input>
            <label for="radioI">imperial</label>

            <div id="mainInfo">
                <div class="element">
                    <label for="client">Client</label>
                    <input id="clientName" type="text" name="client"></input>
                </div>

                <div class="element">
                    <label for="address">Delivery address</label>
                    <input id="deliveryAddress" name="address"></input>
                </div>
                <div class="element">
                    <label for="pricem3">Price per cubic meter</label>
                    <input id="price" name="pricem3"></input>
                </div>
            </div>

            <div id="client">
                <div class="element">
                    <label for="mail">Contact email</label>
                    <input id="clientMail" name="mail"></input>
                </div>

                <div...

CSS

#container
        {
            width: 100%;
            min-width: 900px;
            max-width: 900px;
            display: inline-block;
        }

        #formContainer
        {
            top: 0px;
            left: 0px;
            height: 500px;
            width: 750px;
            padding-top: 15px;
            float: left;
            margin-left: 20px;
        }

        .element
        {
            width: 200px;
            margin-right: 40px;
            float: left;
            height: 3.75em;
        }
        .element.mid
        {
            margin-left: 240px;
            margin-top: 20px;
        }

        p.inline
        {
            display: inline-block;
        }

        #total
        {
            font-weight: bold;
            font-size: large;
            text-align: right;
        }

        #successMessageDiv
        {
            position: relative;
            bottom: 0;
            text-align: center;
            font-size: larger;
            color: green;
        }

        #client
        {
            margin-top: 85px;
        }

        #delivery
        {
            margin-top: 145px;
        }

        #submitPurchase{
            float:right;
            margin-right:75px;
            margin-top:10px;
        }

        #mainInfo
        {
            margin-bottom: 80px;
            margin-top: 25px;
        }

        @media only screen and (max-width: 780px)
        {
            #container
            {
                height: 600px;
            }

            .element
            {
                float: none;
                margin: 10px 0 10px 0 !important;
            }

            #client
            {
                margin-top: 0;
            }

            #delivery
            {
                margin-top: 0;
            }

            #priceContainer
            {
                margin-top: 0;
                margin-left: 0;
            }

            #mainInfo
            {
               ...

JavaScript

$(function () {
$('#clientName').igTextEditor({
            placeHolder: "Company name"
        });
        $('#clientMail').igTextEditor({
            placeHolder: "[email protected]"
        });
        $('#clientMail').igValidator({
            email: true,
            notificationOptions: {
                direction: "bottom",
                mode: "popover"
            }
        });
        $('#deliveryAddress').igTextEditor({
            placeHolder: "Street address, P.O. box"
        });
        $('#deliveryDate').igDateEditor({
            placeHolder: "12/30/2015"
        });
        $('#freeDelivery').igCheckboxEditor({
        	size: "small",
        	valueChanged: function (e, args) {
        		var totalText = $("#total").text().replace("Total: ", ""),
					total = parseFloat(totalText, 10);
					
        		if (args.newValue) {
        			total = total - 20;
        		} else {
        			total = total + 20;
        		}
        		$("#total").text("Total: " + total);
        	}
        });
        $('#price').igCurrencyEditor({
            value: "79",
            minValue : 0,
            currencySymbol: "€"
        });
        $('#amount').igNumericEditor({
            dataMode: "int",
            value: 10,
            minValue: 1,
            blur: function (evt) {
                calculateTotalPrice();
            }
        });
        $('#discount').igPercentEditor({
            value: 0.08,
            minValue: 0
        });

        $(document).delegate("#price", "igcurrencyeditorblur", function (evt) {
            calculateTotalPrice();
        });

        $(document).delegate("#discount", "igpercenteditorblur", function (evt) {
            calculateTotalPrice();
        });

        calculateTotalPrice();

        function radioChange() {
            var radioMetric = document.getElementById("radioMetric");
            if (radioMetric.checked) {
                var imperialPrice = $('#price').igCurrencyEditor("option", "value");
          ...