Replicating Image Flowchart in CSS - html

Question

I have a flow chart that was originally an image which ought to be simple enough to translate into CSS, but as I have little skill in CSS div manipulation I was hoping the wizards of Stack Overflow could help.
I'm trying to replicate the above image in CSS. It doesn't have to look exactly the same, but I'd like to keep the basic layout the same.
I've taken a stab at the second and third columns just to see if I could get that part figured out, but I can't seem to get the second item in the second column to line up with the first item in the second column.
If someone could help me with just that portion, I would be eternally grateful.
.RoleContainerTop {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin: 20px;
float: left;
}
.RoleContainerMiddle {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 75px;
float: left;
}
.RoleContainerBottom {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 150px;
float: left;
}
.RoleContainer p {
text-align: center
}
<div>
<div>
<div class="RoleContainerTop">
<p>
Abracadabra
</p>
</div>
<div class="RoleContainerMiddle">
<p>
Shazam
</p>
</div>
<div class="RoleContainerBottom">
<p>
Alakazam
</p>
</div>
</div>
</div>

Answer 1

I would do something like this. The key is to create your columns of variable width, and from there it's pretty simple. I chose percentage width but you could do it however you like.
I would also advise you to consolidate your css a bit :). You're repeating alot of code that is shared between like elements.
CSS:
* {
box-sizing: border-box;
}
.column-25 {
width: 25%;
padding: 10px;
float: left;
}
.column-25:last-child {
float: right;
}
.block {
width: 100%;
height: 60px;
margin-bottom: 20px;
border: 1px solid #000;
}
.block.center {
margin-top: 40px;
}
HTML:
<div class="container">
<div class="column-25">
<div class="block"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
<div class="column-25">
<div class="block center"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
From here, you could look into absolute positioned elements with some :before/:after wizardry to create the arrows if you'd like.
jsfiddle demo