CSS shapes and text alignment issues

Question

I am trying to create quite a simple layout with divs and css shapes almost like.

My fiddle

So I am trying to get the divs that look like arrows to line up with some divs either side with text in. It is relatively straightforward but I am struggling to get them aligned?

I am a little stuck now and making it worse...

<div id="columnsservices" style="padding: 0px 0 60px 0;">


<div style="float: left; width: 900px;  padding: 0px 80px 0 32px; ">




<div style="float: left; width: 920px;">


<h1 style="color: rgba(64,34,99,1.00); font-size: 30px; padding: 30px 0 30px 0px;">Steps to supported living</h1>

<div class="stepbox">Step 1
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>


<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 2
</div></div>




<div class="stepbox">Step 3
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 0px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>





<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 4
</div></div>




<div class="stepbox">Step 5
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>





<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 6
</div></div>



<div class="stepbox">Step 7
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>
</div>

</div>


</div>

.stepbox{position: relative;
width: 250px;
height: 120px;
padding: 0px;
background-color: rgba(65,34,98,1.00);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: #FFF;
}
.stepbox:after 
{
content: "";
position: absolute;
top: 32px;
right: -39px;
border-style: solid;
border-width: 28px 0 28px 39px;
border-color: transparent rgba(65,34,98,1.00);
display: block;
width: 0;
z-index: 1;
}

.stepboxalt{position: relative;
width: 250px;
height: 120px;
padding: 0px;
background-color: rgba(65,34,98,1.00);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
float: right;
left: 250px;
top: -72px;
}
.stepboxalt:after 
{
content: "";
position: absolute;
top: 32px;
left: -39px;
border-style: solid;
border-width: 28px 39px 28px 0;
border-color: transparent rgba(65,34,98,1.00);
display: block;
width: 0;
z-index: 1;
}

Answer 1

Here's a quick way for you to adapt as required.

Codepen Example

HTML

    <div class="wrapper">
      <div class="step left">
        <div class="arrow">

        </div>
        <div class="content">

        </div>
      </div>
      <div class="step right">
        <div class="arrow">

        </div>
        <div class="content">

        </div>
      </div>

    </div>

**CSS**

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  width:50%;
  margin:10px auto;
}

.step {
  background-color: red;
    overflow:hidden; /* quick clearfix */
  margin-bottom:4px;
}

.arrow {
  width:25%;
  background-color:blue;
  height:75px;
  float:left;
  position: relative;
}

.content {
  width:75%;
  float:left;
}

.right .arrow,
.right .content{
  float:right;
}

.left .arrow:after,
.right .arrow:before {
  position: absolute;
  content:"";
  top:50%;
  width:0;
  height:0;
  border:1rem solid transparent;
  margin-top:-1rem /* border -width */
 }

.left .arrow:after{
    left:100%;
    border-left-color:blue;
}

.right .arrow:before {
  right:100%;
  border-right-color:blue;
}

Answer 2

DEMO Using CSS counters

<ol>
    <li><hr/><p>item 1</p></li>
    <li><hr/><p>item 2</p></li>
    <li><hr/><p>item 3</p></li>
</ol>

css:

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background:red;
}
ol {
    counter-reset:li; /*counter init*/   
}
 li {
    position:relative;
    list-style:none;
    width:100%;
    color:white;
    clear:both;
    display:block;
    margin-bottom:20px;
}
 li:before {
    content:"Step" counter(li);
    counter-increment:li;
    position:absolute;
    top:0;
    height:100%;
    width:145px;
    background:black;
    color:white;
}
li:nth-child(even):before{
    right:0;
}
li:nth-child(even){
    padding:0 120px 0 20px;
}
li:nth-child(even) p{
    width:40%; 
}
li:nth-child(odd):before{
    left:0;
}
li:nth-child(odd){
    padding:0 20px 0 220px;
}

li:nth-child(even):after,li:nth-child(odd):after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    top:50%;
    margin-top:-16px;
}
li:nth-child(odd):after{
    border-left:20px solid black;
    left:142px;
}

li:nth-child(even):after{
    border-right:20px solid black;
    right:142px;
}
hr{
    min-height:50px;
    border:none;
    width:100%;
    clear:both;
}