JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="messages"></dl>

CoffeeScript

saveVisibilityAndDimensions = (parent, child) ->
  parent:
    isVisible: !!parent.filter(":visible").length
    height: parent.height()
    width:  parent.width()
  child:
    isVisible: !!child.filter(":visible").length
    height: child.height()
    width:  child.width()

parent = $('<div class="parent" style=" display:none; height:200px; width:200px; ">')
child = $('<div class="child" style=" height:50%; width:100%; ">')


beforeAppend = saveVisibilityAndDimensions(parent, child)

parent.append child

afterAppend = saveVisibilityAndDimensions(parent, child)

$('body').append parent

afterInsert = saveVisibilityAndDimensions(parent, child)

parent.show()

afterDisplay = saveVisibilityAndDimensions(parent, child)

$("#messages")
  .append("<dt>Before append</dt><dd>#{JSON.stringify beforeAppend}</dd>")
  .append("<dt>After append</dt><dd>#{JSON.stringify afterAppend}</dd>")
  .append("<dt>After insert</dt><dd>#{JSON.stringify afterInsert}</dd>")
  .append("<dt>After display</dt><dd>#{JSON.stringify afterDisplay}</dd>")