HTML form separate columns with borders

Question

I have 4 columns and I need separate each column with borders. It looks like now:

How It should be (red/blue colors just for example):

Problem Is that I don't have any div for columns, I generating rows inside <li> </li> so 4 inputs inside <li> </li> is 1 row:

<form class="form-style-9">

<h2>Personal details</h2>
<ul>
<div id="personal-details">
<li>    

    <div class="test">
    <label for="Rank">Rank</label>
    <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> 
    </div>

    <div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>

    <div class="test">
    <label for="Vesselstype">Vessel's type</label>
    <input id="Vesselstype" type="text" name="Vesselstype" class="field-style field-split25 align-left" placeholder="Vessel's type" />  
    </div>

    <div class="test">
    <label for="datepicker2">Date Applied</label>
    <input id="datepicker2" type="date" name="datepicker2" class="field-style field-split25-4 align-left" placeholder="Date Applied" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="fname">First Name</label>
    <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> 
    </div>

    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>

    <div class="test">
    <label for="height">Height</label>
    <input id="height" type="text" name="height" class="field-style field-split25 align-left" placeholder="Height" />   
    </div>

    <div class="test">
    <label for="na">Nearest airport</label>
    <input id="na" type="text" name="na" class="field-style field-split25-4 align-left" placeholder="Nearest airport" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="sname">Surename</label>
    <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" />   
    </div>

    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>

    <div class="test">
    <label for="weight">Weight</label>
    <input id="weight" type="number" name="weight" class="field-style field-split25 align-left" placeholder="Weight" /> 
    </div>

    <div class="test4">
    <label for="languages">Languages</label>
    <input id="languages" type="text" name="languages" class="field-style field-split25-4 align-left" placeholder="Languages" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="datepicker">Date of Birth</label>
    <input id="datepicker" type="date" name="datepicker" class="field-style field-split25 align-left" placeholder="Date of Birth"  />   
    </div>

    <div class="test">
    <label for="nok">Next of kin</label>
    <input id="nok" type="text" name="nok" class="field-style field-split25 align-left" placeholder="Next of kin" />    
    </div>

    <div class="test">
    <label for="coe">Color of eyes</label>
    <input id="coe" type="text" name="coe" class="field-style field-split25 align-left" placeholder="Color of eyes" />  
    </div>

    <div class="test4">
    <label for="english">English</label>
    <input id="english" type="text" name="english" class="field-style field-split25-4 align-left" placeholder="English" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="pob">Place of Birth</label>
    <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" />
    </div>

    <div class="test">
    <label for="nonok">Name of Next of Kin</label>
    <input id="nonok" type="text" name="nonok" class="field-style field-split25 align-left" placeholder="Name of Next of Kin" />    
    </div>

    <div class="test">
    <label for="coh">Color of hair</label>
    <input id="coh" type="text" name="coh" class="field-style field-split25 align-left" placeholder="Color of hair" />  
    </div>

    <div class="test4">
    <label for="german">German</label>
    <input id="german" type="text" name="german" class="field-style field-split25-4 align-left" placeholder="German" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="HomeAddress">Home Address</label>
    <input id="HomeAddress" type="text" name="HomeAddress" class="field-style field-split25 align-left" placeholder="Home Address" />   
    </div>

    <div class="test">
    <label for="aonok">Address of Next of Kin</label>
    <input id="aonok" type="text" name="aonok" class="field-style field-split25 align-left" placeholder="Address of Next of Kin" /> 
    </div>

    <div class="test">
    <label for="os">Overall size</label>
    <input id="os" type="text" name="os" class="field-style field-split25 align-left" placeholder="Overall size" /> 
    </div>

    <div class="test4">
    <label for="spain">Spain</label>
    <input id="spain" type="text" name="spain" class="field-style field-split25-4 align-left" placeholder="Spain" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="sz">Shoe size</label>
    <input id="sz" type="text" name="sz" class="field-style field-split25 align-left" placeholder="Shoe size" />    
    </div>

    <div class="test4">
    <label for="BankDetails">Bank Details</label>
    <input id="BankDetails" type="text" name="BankDetails" class="field-style field-split25-4 align-left" placeholder="Bank Details" />
    </div>
</li>

</div>

Have you any ideas how can I achieve that? Here is FIDDLE

Answer 1

If to keep your existing markup, here is an option (though you might need to adjust the values a little)

To be noted, having a <div id="personal-details"> as a direct child of ul is invalid markup and should be removed. You can put the id on the ul instead.

Updated fiddle

ul {
  position: relative;
}
ul li:first-child .test:before {
  content: ' ';
  position: absolute;
  display: block;
  border: 1px solid red;
  top: 0;
  left: 0;
  width: 23.5%;
  height: 100%;
}
ul li:first-child .test:nth-child(2):before {
  left: calc(23.5% + 1px);
  width: 24%;
  border: 1px solid blue;
}
ul li:first-child .test:nth-child(3):before {
  left: calc(47.5% + 1px);
  width: 24%;
}
ul li:first-child .test:nth-child(4):before {
  left: calc(71.5% + 1px);
  border: 1px solid blue;
}

Answer 2

If you strongly need to keep it as row-wise, you have the option of using absolutely positioned, divs.

#personal-details{
  position: relative;
}
ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li{
  width: 25%;
}
.parent{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.borders{
  display: flex;
  justify-content: space-between;
  height: 40px;
}
.border{
  border: 1px solid red;
  width: 25%;
}

<div id="personal-details">
  <ul>
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
    <li>this is forth</li>
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
    <li>this is forth</li>
  </ul>
  <div class="parent">
    <div class="borders">
      <div class="border"></div>
      <div class="border"></div>
      <div class="border"></div>
      <div class="border"></div>
    </div>
  </div>
</div>

Note1

Please note that you should not put divs directly inside ul so this is incorrect:

<ul>
    <div>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </div>
</ul>

Note2

That would be a better practice if you produce them, column-wise, so that way you don't need to monkey with your CSS.

Desired markup

<ul id="personal-details">
    <li>
        <ul class="column">
            <li>Rank</li>
            <li>First name</li>
            <li>Surname</li>
            <li>Date of Birth</li>
            <li>Place of Birth</li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>Rank</li>
            <li>Nationality</li>
            <li>No. of children</li>
            <li>Next of kin</li>
            <li>Name of Next of kin</li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li> ... </li>
    <li> ... </li>
</ul>

Solution

ul{
  list-style: none;
}
#personal-details{
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#personal-details > li{
  padding: 20px;
  border: 1px solid red;
}
.column{
  padding: 0;
  text-align: center;
}

<ul id="personal-details">
    <li>
        <ul class="column">
            <li>
                <label for="Rank">Rank</label>
                <input type="text" name="Rank" placeholder="Rank" />
            </li>
            <li>
                <label for="Firstname">First name</label>
                <input type="text" name="Firstname" placeholder="Firstname" />
            </li>
            <li>
                <label for="Surname">Surname</label>
                <input type="text" name="Surname" placeholder="Surname" />
            </li>
            <li>
                <label for="Rank">Date of Birth</label>
                <input type="text" name="DateofBirth" placeholder="DateofBirth" />
            </li>
            <li>
                <label for="PlaceofBirth">Place of Birth</label>
                <input type="text" name="PlaceofBirth" placeholder="Place of Birth" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="RankApplied">Rank Applied</label>
                <input type="text" name="RankApplied" placeholder="RankApplied" />
            </li>
            <li>
                <label for="Nationality">Nationality</label>
                <input type="text" name="Nationality" placeholder="Nationality" />
            </li>
            <li>
                <label for="NoOfChildren">No. Of Children</label>
                <input type="text" name="NoOfChildren" placeholder="NoOfChildren" />
            </li>
            <li>
                <label for="NextOfKin">Next Of Kin</label>
                <input type="text" name="NextOfKin" placeholder="NextOfKin" />
            </li>
            <li>
                <label for="NameOfNextOfKin">Name of Next of kin</label>
                <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="Rank">Rank</label>
                <input type="text" name="Rank" placeholder="Rank" />
            </li>
            <li>
                <label for="Firstname">First name</label>
                <input type="text" name="Firstname" placeholder="Firstname" />
            </li>
            <li>
                <label for="Surname">Surname</label>
                <input type="text" name="Surname" placeholder="Surname" />
            </li>
            <li>
                <label for="Rank">Date of Birth</label>
                <input type="text" name="DateofBirth" placeholder="DateofBirth" />
            </li>
            <li>
                <label for="PlaceofBirth">Place of Birth</label>
                <input type="text" name="PlaceofBirth" placeholder="Place of Birth" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="RankApplied">Rank Applied</label>
                <input type="text" name="RankApplied" placeholder="RankApplied" />
            </li>
            <li>
                <label for="Nationality">Nationality</label>
                <input type="text" name="Nationality" placeholder="Nationality" />
            </li>
            <li>
                <label for="NoOfChildren">No. Of Children</label>
                <input type="text" name="NoOfChildren" placeholder="NoOfChildren" />
            </li>
            <li>
                <label for="NextOfKin">Next Of Kin</label>
                <input type="text" name="NextOfKin" placeholder="NextOfKin" />
            </li>
            <li>
                <label for="NameOfNextOfKin">Name of Next of kin</label>
                <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
</ul>