Well, mine didn’t either I guess. Is it a html table you has decided for?
What about this css version after playing with it?
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Check Flow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
html,
body{
margin:0;
padding:0;
box-sizing:border-box;
}
*, *:before, *:after {
box-sizing:inherit;
}
.checkflow{
float:left;
display:table;
border-collapse:collapse;
height:100%;
height:35em;
white-space:nowrap;
text-align:center;
font:1em sans-serif;
}
h1{
display:table-caption;
caption-side:top;
text-transform:uppercase;
font:normal 1em sans-serif;
}
.us,
.pain{
display:inline-table;
width:1%;
height:100%;
vertical-align:top;
text-align:left;
}
.pain{
width:35%;
}
.us div{
display:table;
width:100%;
height:60%;
}
.us div+div{
height:40%;
}
.us div div,
.pain div{
display:table-row;
height:1px;
}
.pain div:nth-child(2n+2){
height:1px;
}
.checkflow span{
display:table-cell;
position:relative;
z-index:1;
padding:1em;
color:green;
vertical-align:middle;
}
.checkflow .us span{
padding:1em 2em;
vertical-align:top;
}
.checkflow .pain{
white-space:normal;
}
.pain span{
position:relative;
z-index:1;
}
.organ1 span,
.organ2 span,
.organ3 span{
border:2px solid black;
}
.organ3 span{
border-bottom:0;
text-align:center;
}
.v-line span:before{
position:absolute;
top:0;
left:50%;
border-left:2px solid black;
height:100%;
content:"\a0";
}
.h-line span:before,
.h-line span:after{
display:block;
position:absolute;
z-index:-1;
top:50%;
right:100%;
border-top:2px solid black;
width:5em;
content:"\a0";
}
.h-line span:after{
right:auto;
left:100%;
}
.note span{
font:normal .8em sans-serif;
}
.ruq div:nth-child(2) span,
.rlq div:first-child span,
.luq div:nth-child(2) span,
.llq div:first-child span{
height:1px;
color:black;
}
.ruq div:first-child span,
.rlq div:last-child span,
.luq div:first-child span,
.llq div:last-child span{
height:1px;
color:maroon;
}
</style>
</head><body>
<div class="checkflow"">
<h1>From the abdominal pain to the organ</h1>
<div class="us">
<div class="ruq">
<div><span>US</span></div>
<div><span>RUQ</span></div>
<div><span>Lungs<br>Diaphragm<br>Liver<br>Duodenum<br>Gallbladder</span></div>
</div>
<div class="rlq">
<div><span>RLQ</span></div>
<div><span>Kidneys/ureters<br>Colon - appendix<br>Gyn / testes</span></div>
<div><span>CT</span></div>
</div>
</div>
<div class="pain">
<div class="organ1"><span>Heart, aorta <i class="note">(MI and dissection can be felt sometimes as epigastric pain)</i> pancreas, esophagus</span></div>
<div class="v-line"><span> </span></div>
<div class="organ2 h-line"><span>DKA, constipation, diarrhea, early appendicitis</span></div>
<div class="v-line"><span> </span></div>
<div class="organ3 note"><span>Uterus<br>Bladder</span></div>
</div>
<div class="us">
<div class="luq">
<div><span>US</span></div>
<div><span>LUQ</span></div>
<div><span>Lungs<br>Diaphragm<br>Spleen</span></div>
</div>
<div class="llq">
<div><span>LLQ</span></div>
<div><span>Kidneys/ureters<br>Colon - diverticula<br>Gyn / testes</span></div>
<div><span>CT</span></div>
</div>
</div>
</div>
</body></html>
