JSFiddle - React, Tailwind, and code Playground

by Kvark

HTML

<div class="container">
    <div class="row div-example">
        <div class="col-sm-9 col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">Using &lt;div&gt; tags</div>
                <div class="panel-body">
                    <div class="col-xs-12 alert alert-warning">
                        <div class="glyphicon glyphicon-exclamation-sign"></div>
                        <div>My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row span-example">
        <div class="col-sm-9 col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">Using &lt;span&gt; tags (icon centered)</div>
                <div class="panel-body">
                    <div class="col-xs-12 alert alert-warning">
                        <i class="glyphicon glyphicon-exclamation-sign"></i>
                        <span>My </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.alert {
  display: flex;
  flex-direction: row;
}

.alert .glyphicon{
    margin-right: 10px;
}

.span-example .alert .glyphicon {
  align-self: center;
}

.alert div,
.alert span{
    
}