JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<body>
  <div id="parent">
    <div id="child">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus eget varius. Curabitur imperdiet sagittis leo, a mollis dui lobortis in. In ac facilisis tortor. Nam vitae pellentesque lorem, non commodo lacus.
    <div>
  </div>
</body>

CSS

html, body{
  height:100%;
    border:1px solid lightgreen;
}

#parent{
  position:relative;
  width:15%;
  height:100%;
  overflow:hidden;
    border:1px solid fuschia;
    display:block;
}
#parent:hover{
    width:30%;
    overflow:hidden;
    display:block;
    height:100%;
}

#child{
  position:relative;
  width:100%;
    border:1px solid blue;
}