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>

<h2>Order details</h2>
    <div id="main">
        <img src="../images/shoe.jpg"></img>
        <div id="shoeInfo">
            <h3>Product: <span id="brand">CHEAP HIGH QUALITY MEN'S SHOES BRAND 2015</span></h3>
            <div>
                <p>Shoe size (37-46)</p>
                <div id="shoeSize"></div>
                <img class="tip" id="tip1" src="https://igniteui.com/images/helpnav/help.png"></img>
				<div class="notifier-message">
					<span class="info" id="info1">To get the warning message, enter larger size than 46 or smaller then 37.</span>
				</div>
            </div>
            <div>
                <p>Shoe Color</p>
                <div id="shoeColor"></div>
                <img class="tip" id="tip2" src="https://igniteui.com/images/helpnav/help.png"></img>
				<div class="notifier-message">
					<span class="info" id="info2">To get the warning message, enter a value that is not present in the dropdown list.</span>
				</div>
            </div>
            <div>
                <p>Quantity</p>
                <div id="quantity"></div>
                <img class="tip" id="tip3" src="https://igniteui.com/images/helpnav/help.png"></img>
				<div class="notifier-message">
					<span class="info" id="info3">To get the warning message, click the spin arrows until you reach the...

CSS

#main
        {
            border: solid 1px black;
            height: 270px;
        }

        #main > img
        {
            height: 250px;
            float: left;
        }

        #shoeInfo
        {
            margin-left: 190px;
        }

        #brand
        {
            color: #ccc;
        }

        #shoeInfo p
        {
            margin-top: 20px;
        }

        #cost
        {
            border: solid 1px black;
            border-top: 0px;
            height: 100px;
            padding-top: 20px;
        }

        #promo
        {
            float: left;
            margin-left: 20px;
        }

        #promo > p
        {
            margin-bottom: 5px;
        }

        #cost > p
        {
            float: right;
            margin-right: 20px;
            font-size: 16px;
        }

        .info
        {
           
            color: #808080;
            vertical-align: top;
        }
        .tip
        {
            height:16px;
            width:16px;                
            vertical-align: top;
            margin:0 2px 0 5px;
        }
		.notifier-message 
		{
			float: right;
			width: 400px;
		}

        @media only screen and (max-width:480px)
        {
            #main
            {
                height: 30%;
            }
            #shoeSize, #shoeColor, #quantity, #promoCode
            {
                width: 150px;

            }
            #cost
            {
                    height: 120px;
            }
            #cost > p
            {
                font-size: 14px;
                margin-top:20px;
            }
        }

JavaScript

$(function () {
            var colors = ["blue", "red", "brown"];

            $("#shoeSize").igNumericEditor({
                minValue: 37,
                maxValue: 46
            });

            $("#shoeColor").igTextEditor({
                listItems: colors,
                isLimitedToListValues: true
            });

            $("#quantity").igNumericEditor({
                dataMode: 'int',
                buttonType: "spin",
                minValue: 1,
                maxValue: 3,
                spinDelta: 1,
                spinWrapAround: true
            });

            $("#promoCode").igTextEditor({
                maxLength: 6
            });

            $(".info").hide();

            $("#tip1").click(function () { $("#info1").toggle(); });
            $("#tip2").click(function () { $("#info2").toggle(); });
            $("#tip3").click(function () { $("#info3").toggle(); });
            $("#tip4").click(function () { $("#info4").toggle(); });

        });