JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>Centre de msd</h3>
      <p> 546, avenue ffds dfdsfd</p>
      <p> A-1234 fdfdfsf (Austria)</p>
    
        <ul id="contact">
          <li><i class="icon-phone-sign"></i> +352 691 123.456</li>
          <li><i class="icon-envelope"></i><a href="#"> geyi@iyiyiy.com</a></li>
          <li><i class="icon-map-marker"></i><a href="http://goo.gl/m2"> itinéraire</a></li>
        </ul>
     
</div>  <!-- End DIV addressbox -->

</div>  <!-- End DIV block-left -->
<div class="block-right">  <h1>Formulaire de contact</h1>
            <!-- CONTACT FORM-->
            <div class="contact-form">
              

                <form id="contactfrm" method="post" class="clearfix">
                    <div class="clearfix">
                        <input id="name" name="name" placeholder="Nom" type="text" value="">
                        <input id="email" name="email" placeholder="Email" type="email" value="">
                    </div>

                    <textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>

                    <input type="submit" value="Envoyer" name="submit">
                     
  <p class="success" style="display:none">Merci pour votre message!<br> Nous vous répondrons très rapidement.</p>
  <p class="error" style="clear:both;display:none;color:red; text-align:center">Erreur: E-mail non valide et/ou message vide.</p>
                </form>
            </div><!-- /.contact-form -->
</div>  <!-- End DIV block-right -->
 </div>  <!-- End DIV Block -->
</div>  <!-- End DIV Contactwrapper -->

CSS

#contactwrapper {
    margin-top: 30px;
    padding-bottom: 30px;
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
    -moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
    box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 20px;
}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
}

.clear:after { clear: both }
.clear { clear: both }

#addressbox p {
    color: #333;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
}
#contact li {
    display: inline;
    padding-right: 5px;
    color: #333;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.coach1 li {
    margin: 0px;
    margin-bottom: 3px;
    margin-left: 10px;
    padding: 0px;
    color: #667878;
    list-style-type: none;
    font-weight: 300;
    font-size: 14px;
}

.contact-form input[type=text] {
    float: left;
    width: 200px;
}
.contact-form input[type=email] {
    float: right;
    width: 200px;
  
}
.contact-form input[type=submit] {
    float: right;
}
.contact-form textarea {
float: left;
    height: 70px;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
}
/*************************************************************


/*************************************************************
 * FORMS
 *************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
    background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
    border-top: 1px solid transparent;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid transparent;
    border-left: 1px solid...