JSFiddle - React, Tailwind, and code Playground

HTML

<div id="feedback"><span class="feedback_icon"></span><span class="feedback_text"></span><div class="clearfix"></div></div>

CSS

.clearfix {
    clear: both;
}

#feedback {
  font-weight: bold;
  min-height: 24px;
  line-height: 24px;
  border: solid 1px #d1d2d1;
  padding: 5px 10px;   
  background-color: #f7f2e7;
  margin-bottom: 10px;
  display: none;
  border-radius: 5px;  
  -moz-border-radius: 5px; /* FF < 4.0 */
  -webkit-border-radius: 5px;     /* Rounded corners for Safari */ 
}

#feedback span { display: block; float: left;}
#feedback .feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback .feedback_text { line-height: 24px; display: inline-block; }
#feedback .dialogSuccess { background: transparent url(../img/icons24px.png) no-repeat -48px  0px;  }
#feedback .dialogFail { background: transparent url(../img/icons24px.png) no-repeat -120px  0px;  }
#feedback .dialogInfo { background: transparent url(../img/icons24px.png) no-repeat -96px  0px;  }

JavaScript

$('.feedback_text').html('This is a test of some HTML that might possibly be in the div. This is a very long text  and therefore I ad some extra bits of totally useless gibberish.');
$('.feedback_icon').addClass('wibble');
$('#feedback').fadeIn();