Расчет высоты строки и отступа от дизайна в плоском формате изображения

Мой ответ не о статическом макете parent-child, о анимации.

Сегодня я делал демонстрацию svg, и мне нужно было svg быть внутри div (потому что svg создается с шириной div родителя и height, чтобы анимировать путь), и этот родительский div должен был быть невидим во время анимации пути SVG (а затем этот div должен был animate opacity from 0 to 1, это самая важная часть). И поскольку родительский div с opacity: 0 скрывал мой svg, я столкнулся с этим хаком с опцией visibility (дочерний элемент с visibility: visible можно увидеть внутри родителя с помощью visibility: hidden):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

И затем, в js, вы удаляете .invisible класс с функцией тайм-аута, добавляете класс .opacity-zero, размещаете раскладку с чем-то вроде whatever.style.top; и удаляете .opacity-zero класс.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Лучше проверить это демо http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011