Implicit width transition

Question

Implicit width (i.e. adding padding to an element that contains text in order to give the parent container a specific, yet implicit width) is a beautiful thing. However, this obviously creates some complications for transitions. Can anybody think of any way to create a transition like the one in the CodePen link below without using explicit widths?

<div id='has-implicit-width'>
  <div class='text-element'>Some Text That Always Varies in Length</div>
</div>

.text-element {
  padding: 12px;
}

https://codepen.io/julienfontaine/pen/yJxQmK

Answer 1

This can now be done using CSS grid. Credit to Moob.

#parent {
  display: grid;
  grid-template-rows: min-content 0fr;
  transition: grid-template-rows 500ms;
}

#parent:hover {
  grid-template-rows: min-content 1fr;
}

#child {   
  background-color: #dedede;
  overflow: hidden;
}

<div>OTHER EL</div>
<div id="parent">
  <div>Hover me</div>
  <div id="child">
    <div>Some content</div>
    <div>Some content</div>
    Some content
    <br>Some content
    <br>Some content
  </div>
</div>
<div>OTHER EL</div>