JSFiddle - React, Tailwind, and code Playground

by corin

HTML

<div>
  <a><i>begin</i><p><s>middle</s></p><b>end</b></a>
  <a>after</a>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/>
<a href="http://www.screenr.com/qJH7">Safari</a>
<a href="http://www.screenr.com/vJH7">Chrome</a>

CSS

div * {
  display: inline-block;
}
a { cursor: pointer; }
i, s, b {
  padding: 8px;
  border: solid 1px #ccc;
}

p {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  white-space: nowrap;
  -webkit-transition: width 1s;
}

CoffeeScript

$('div > a').each ()->
  a = $ this
  p = $ 'p', a
  a.toggle (()-> p.width 0),
    ()-> p.width p[0].scrollWidth