JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#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 .feedback_icon {display: block; float: left }
#feedback .feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback .feedback_text { line-height: 24px; }
#feedback .dialogSuccess { background: transparent url(http://dummyimage.com/24x24/000/0f0) no-repeat }
#feedback .dialogFail { background: transparent url(http://dummyimage.com/24x24/000/f00) no-repeat }
#feedback .dialogInfo { background: transparent url(http://dummyimage.com/24x24/000/00f) no-repeat }

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('dialogSuccess');
$('#feedback').fadeIn();