JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<ul class="history message-list">
    <li class="message">
        <span class="message-inner">
            <span class="message-inner-inner">
                <span>
                    <span class="from">Test From</span>
                    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
                </span>
            </span>
        </span>
    </li>
</ul>
<div id="is-typing">someone is typing</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

html,body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    position:relative;
}

body {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 14px;
}

.history, .previews {
  padding: 0;
  margin: 0;
  list-style: none;
}

.from {
  font-weight: bold;
  font-size: 16px;
}

.message-list {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 5px 15px 0;
}

.message {
  border-left: 5px solid transparent;
  word-wrap: break-word;
}

.message-inner {
  display: block;
  padding-right: 9px;
  padding-left: 4px;
  padding-top: 1px;
  padding-bottom: 4px;
}

.message-inner-inner {
  display: inline;
}

#is-typing {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 10px;
  position: absolute;
  height: 15x;
  bottom: 4px;
}