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>

CSS

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

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.one 'webkitTransitionEnd', ()-> p.hide()
      p.width 1
    ()->
      p.show()
      p.width p[0].scrollWidth
  )