JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float: left; margin-left: 50px;">    
    <div id="div_properties" class="redBorder left" style="clear: left;">
        <div class="right">
            <a href="#" id="closePropertiesWindow">
            <img title="Close window" id='img1'></a>
        </div>
        <div class="centered noMargin whiteBackground">
            <h3 class="noMargin">Properties</h3>
        </div>
        <hr class="noMargin noPadding">

        <div id="div_properties_content" style="display: block;">
            <div class="noMargin propertiesControl" prop="text" style="width:100%;">
                text: 
                <input type="text" id="propertytextTextBox" class="right"></input> 
            </div>
            <div class="noMargin propertiesControl" prop="width" style="width:100%;">
                width: 
                <input type="number" id="propertywidthNumber" class="right"></input> 
            </div>
            <div class="noMargin propertiesControl" prop="italic" style="width:100%;">
                italic: 
                <input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked"> 
            </div>
            <div class="noMargin propertiesControl" prop="bold" style="width:100%;">
                bold: 
                <input type="checkbox" id="propertyboldCheckBox" class="right"> 
            </div>
            <br>
            <input type="button" id="savePropertiesButton" value="Save" class="right">
        </div>
    </div>
</div>

CSS

body {
        font-Family: 'Open Sans', Helvetica, Arial, sans-serif;
    }

#img1 {
    Width: 16px;
    height: 16px;
}

    #div_properties {
        margin-top: 5px;
        background-color: #F0F0F0;
        width: 300px;
        float: left;
        min-height: 75px;
    }

    .redBorder {
        border: 1px solid red;
    }

    .noMargin {
         margin: 0 0 0 0;
    }

    .left {
        float: left;
     }

     .right {
          float: right;
     }