How to align ul list side by side?

Question

I have to Four list. I want to display them in side by side. First Row Doctor and patient side by side second pharma Company and employee etc. In my code, this is not working properly.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree li a {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-left: 9px;
}

.tree li a label {
  margin-left: 20px;
  margin-top: -20px;
}


/*Remove connectors before root*/

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0;
}


/*Remove connectors after last child*/

.tree li:last-child::before {
  height: 30px;
}


/*Time for some hover effects*/


/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #dd4814;
  color: #ffffff;
  border: 1px solid #dd4814;
}


/*Connector styles on hover*/

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #dd4814;
}

.tree-checkbox {
  margin: 4px !important;
}

.tree:before {
  border-left: 1px solid #ccc;
  bottom: 16px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -21px;
  width: 1px;
  z-index: 1;
}

.tree ul:after {
  border-top: 1px solid #ccc;
  content: "";
  height: 20px;
  left: -29px;
  position: absolute;
  right: auto;
  top: 30px;
  width: 42px;
}

*:before,
*:after {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

.tree {
  overflow: auto;
  padding-left: 0px;
  position: relative;
}

<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" /><input name="DomainViews[0].IsChecked" type="hidden" value="false" />
              <label for="1">Doctor</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" /><input name="DomainViews[1].IsChecked" type="hidden" value="false" />
              <label for="2">Patient</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" /><input name="DomainViews[2].IsChecked" type="hidden" value="false" />
              <label for="3">Pharma Company</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" /><input name="DomainViews[3].IsChecked" type="hidden" value="false" />
              <label for="4">Employee</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" /><input name="DomainViews[4].IsChecked" type="hidden" value="false" />
              <label for="5">Hospital</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" /><input name="DomainViews[5].IsChecked" type="hidden" value="false" />
              <label for="6">Insurance Company</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

Like this:

 1. Doctor         patient

 2. Pharma Company Employee

Answer 1

Since, you're using bootstrap and trying to make it responsive. The correct way to do this is to use class row and class col-md for aligning and dividing the space. Changes made:

• You need to have seperate contains for each of the 2 adjacent items as <div class="level row"> where we can apply the CSS on the level.

• Since, you're using col-md-6, half the view grid on the tree class. Each of the columns will take col-md-3 as <li class="dd-item col-md-3">.

• And even after that, if you still want to maintain the side by side display on small viewports, just add display:flex to level class.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree li a {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-left: 9px;
}

.tree li a label {
  margin-left: 20px;
  margin-top: -20px;
}


/*Remove connectors before root*/

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0;
}


/*Remove connectors after last child*/

.tree li:last-child::before {
  height: 30px;
}


/*Time for some hover effects*/


/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #dd4814;
  color: #ffffff;
  border: 1px solid white;
}


/*Connector styles on hover*/

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #dd4814;
}

.tree-checkbox {
  margin: 4px !important;
}

.tree:before {
  border-left: 1px solid #ccc;
  bottom: 16px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -21px;
  width: 1px;
  z-index: 1;
}

.tree ul:after {
  border-top: 1px solid #ccc;
  content: "";
  height: 20px;
  left: -29px;
  position: absolute;
  right: auto;
  top: 30px;
  width: 42px;
}

*:before,
*:after {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

.tree {
  overflow: auto;
  padding-left: 0px;
  position: relative;
}

.level {
  display: flex;
}

.level>li {
  margin: 10px;
  width: 250px;
  background: gray;
  padding-bottom:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          <div class="level row">
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" /><input name="DomainViews[0].IsChecked" type="hidden" value="false" />
                <label for="1">Doctor</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" /><input name="DomainViews[1].IsChecked" type="hidden" value="false" />
                <label for="2">Patient</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </div>
          <div class="level row">
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" /><input name="DomainViews[2].IsChecked" type="hidden" value="false" />
                <label for="3">Pharma Company</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" /><input name="DomainViews[3].IsChecked" type="hidden" value="false" />
                <label for="4">Employee</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </div>
          <div class="level row">
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" /><input name="DomainViews[4].IsChecked" type="hidden" value="false" />
                <label for="5">Hospital</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dd-item col-md-3">
              <a href="#">
                <input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" /><input name="DomainViews[5].IsChecked" type="hidden" value="false" />
                <label for="6">Insurance Company</label>
              </a>
              <ul class="dd-list">
                <li class="dd-item">
                  <a href="#">
                    <input type="checkbox" id="2">
                    <label for="2"> Level 2 - 1</label>
                  </a>
                  <ul class="dd-list">
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="3">
                        <label for="3"> Level 3 - 1</label>
                      </a>
                    </li>
                    <li class="dd-item">
                      <a href="#">
                        <input type="checkbox" id="4">
                        <label for="4"> Level 3 - 2</label>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </div>



        </ul>
      </div>
    </div>

Answer 2

Just add this css rules:

.tree > ul > li {
    display: inline-block;
    background-color: #666;
    margin: 0 20px 20px 0;
    padding-bottom: 20px;
}
.tree > ul > li:nth-child(odd) {
    float: left;
}
.tree > ul > li a {
    color: #fff;
}

.tree >ul > li:nth-child(odd) {
  float: left;
}
.tree >ul > li {
display: inline-block;
  background-color: #666;
  margin: 0 20px 20px 0;
  padding-bottom: 20px;
}
.tree >ul > li a {
  color: #fff;
}
.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree li a {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-left: 9px;
}

.tree li a label {
  margin-left: 20px;
  margin-top: -20px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
  border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
  height: 30px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a {
  background: #dd4814;
  color: #ffffff;
  border: 1px solid #dd4814;
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
  border-color: #dd4814;
}

.tree-checkbox {
  margin: 4px !important;
}

.tree:before {
  border-left: 1px solid #ccc;
  bottom: 16px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -21px;
  width: 1px;
  z-index: 1;
}        

.tree ul:after {
  border-top: 1px solid #ccc;
  content: "";
  height: 20px;
  left: -29px;
  position: absolute;
  right: auto;
  top: 30px;
  width: 42px;
}

*:before, *:after {
  box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

.tree {
  overflow: auto;
  padding-left: 0px;
  position: relative;
}

<div class="col-lg-12">
    <div class="row">
        <div class="col-md-6">
            <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
                <ul id="tree" class="dd-list">
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[0].IsChecked" type="hidden" value="false" />
                            <label for="1">Doctor</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[1].IsChecked" type="hidden" value="false" />
                            <label for="2">Patient</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[2].IsChecked" type="hidden" value="false" />
                            <label for="3">Pharma Company</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[3].IsChecked" type="hidden" value="false" />
                            <label for="4">Employee</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[4].IsChecked" type="hidden" value="false" />
                            <label for="5">Hospital</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dd-item">
                        <a href="#">
                            <input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" />
                            <input name="DomainViews[5].IsChecked" type="hidden" value="false" />
                            <label for="6">Insurance Company</label>
                        </a>
                        <ul class="dd-list">
                            <li class="dd-item">
                                <a href="#">
                                    <input type="checkbox" id="2">
                                    <label for="2"> Level 2 - 1</label>
                                </a>
                                <ul class="dd-list">
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="3">
                                            <label for="3"> Level 3 - 1</label>
                                        </a>
                                    </li>
                                    <li class="dd-item">
                                        <a href="#">
                                            <input type="checkbox" id="4">
                                            <label for="4"> Level 3 - 2</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 3

You can add the following code to your CSS:

#tree {
  display: flex;
  flex-wrap: wrap;
}
#tree > li {
  flex-basis: 50%;
  box-sizing: border-box;
}

the flexbox will force the lis to be arranged in a row. We will make all lis 50% in width, and allow them to go down to a new line using flex-wrap: wrap;.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

.tree li a {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-left: 9px;
}

.tree li a label {
  margin-left: 20px;
  margin-top: -20px;
}

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0;
}

.tree li:last-child::before {
  height: 30px;
}

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #dd4814;
  color: #ffffff;
  border: 1px solid #dd4814;
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #dd4814;
}

.tree-checkbox {
  margin: 4px !important;
}

.tree:before {
  border-left: 1px solid #ccc;
  bottom: 16px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -21px;
  width: 1px;
  z-index: 1;
}

.tree ul:after {
  border-top: 1px solid #ccc;
  content: "";
  height: 20px;
  left: -29px;
  position: absolute;
  right: auto;
  top: 30px;
  width: 42px;
}

*:before,
*:after {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

.tree {
  overflow: auto;
  padding-left: 0px;
  position: relative;
}

#tree {
  display: flex;
  flex-wrap: wrap;
  background-color: #c0becc;
}

#tree>li {
  flex-basis: 50%;
  box-sizing: border-box;
}

#tree>li:nth-child(1),
#tree>li:nth-child(2) {
  background: #e0e0e0;
}

<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[0].IsChecked" type="hidden" value="false" />
              <label for="1">Doctor</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[1].IsChecked" type="hidden" value="false" />
              <label for="2">Patient</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[2].IsChecked" type="hidden" value="false" />
              <label for="3">Pharma Company</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[3].IsChecked" type="hidden" value="false" />
              <label for="4">Employee</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[4].IsChecked" type="hidden" value="false" />
              <label for="5">Hospital</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[5].IsChecked" type="hidden" value="false" />
              <label for="6">Insurance Company</label>
            </a>
            <ul class="dd-list">
              <li class="dd-item">
                <a href="#">
                  <input type="checkbox" id="2">
                  <label for="2"> Level 2 - 1</label>
                </a>
                <ul class="dd-list">
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="3">
                      <label for="3"> Level 3 - 1</label>
                    </a>
                  </li>
                  <li class="dd-item">
                    <a href="#">
                      <input type="checkbox" id="4">
                      <label for="4"> Level 3 - 2</label>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>