Генеалогическое древо смешанных семей

Question

Поэтому я использую приведенный ниже код для создания горизонтального генеалогического дерева для своего сайта, но мне нужна помощь. Мне нужно выяснить, как создать смешанную семью ... в которой, скажем, ... первая жена ушла из жизни, оставив ребенка с одним мужчиной, который снова женился и имел с ней детей, или имея ребенка от внебрачного брака. ... По сути, он будет иметь одну из ячеек для ввода ссылок на две боковые ячейки для ввода, которые я могу использовать для жен.

Любая помощь будет отличной! не знаю, как их отсортировать, и я поливал их уже несколько дней .. мои глаза устали.

ссылка на кодовое дерево: https://codepen.io/P233/pen/Kzbsi

Надеюсь, что в конце концов это будет выглядеть примерно так ...

введите описание изображения здесь

Это код, который я модифицировал для использования в css / html:

HTML

<div class="entry"><span class="label"><a href:" ">♔ Icarus of Speros</a> (57, ♂)<br><a href:" ">♕ Gaia of Speros</a> (47, ♀)</span>
  <div class="branch lv2">
<div class="entry"><span class="label"><a href:" ">Angelus of Speros</a> (32, ♂)<br><a href:" ">b. Theodora of Laskaris</a> (26, ♀)</span>
    </div>
    <div class="entry"><span class="label"><a href:" ">Pericles of Speros</a> (28, ♂)</span>

    </div>
    <div class="entry"><span class="label"><a href:" ">Ophelia of Speros</a> (26, ♀)</span></div>
    <div class="entry"><span class="label"><a href:" ">Orion of Speros</a> (26, ♂)</span>

    </div>
  </div>
</div>
<div class="entry"><span class="label"><s>Orpheus of Spero</s>s (52, ♂)<br><a href:" ">Io of Speros</a> (37, ♀)</span>
  <div class="branch lv2">
    <div class="entry"><span class="label"><s>Arius of Speros</s> (19, ♂)</span></div>
    <div class="entry"><span class="label">Leonidas of Speros (17, ♂)</span></div>
    <div class="entry"><span class="label"><s>Zenna of Speros</s> (5, ♀)</span>
    </div>
  </div>
</div>

CSS

.noroot {
  min-width: 900px;
  position: relative;
  margin: -50px 0 0 -110px;
  background: transparent;
  -ms-transform: scale(0.75, 0.75); /* IE 9 */
  -webkit-transform: scale(0.75, 0.75); /* Safari */
  transform: scale(0.75, 0.75);
}

div.noroot > span.label, div.lv1:before {
display: none;
}

.laskaris {
  min-width: 900px;
  position: relative;
  margin: 0 0 0 -80px;
  background: transparent;
  -ms-transform: scale(0.75, 0.75); /* IE 9 */
  -webkit-transform: scale(0.75, 0.75); /* Safari */
  transform: scale(0.75, 0.75);
}

.branch {
  position: relative;
  margin-left: 250px;
}
.branch:before {
  content: "";
  width: 25px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -75px;
  top: 50%;
  margin-top: 1px;
}

.entry {
  position: relative;
  min-height: 60px;
}
.entry:before {
  content: "";
  height: 100%;
  border-left: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
}
.entry:after {
  content: "";
  width: 50px;
  border-top: 2px solid #eee9dc;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.entry:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.entry:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.entry:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.entry:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #eee9dc;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.entry.sole:before {
  display: none;
}
.entry.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}


.bastard {
  position: relative;
  min-height: 60px;
}
.bastard:before {
  content: "";
  height: 100%;
  border-left: 2px solid transparent;
  position: absolute;
  left: -50px;
}
.bastard:after {
  content: "";
  width: 50px;
  border-top: 2px solid transparent;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.bastard:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.bastard:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.bastard:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.bastard:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid transparent;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.bastard.sole:before {
  display: none;
}
.bastard.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.label {
  display: block;
  min-width: 150px;
  padding: 5px 10px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #eee9dc;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

.label a:before { display: none; }
.label a:hover:before { display: none; }