aligning hierarchical checkboxes

Question

I am not good with CSS. I am not sure how to align checkboxes in columns with their child checkboxes underneath as a hierarchical representation. Example, I have countries and their respective states to be shown in a hierarchy but in columns as shown in the image below.

I am not sure how to align this using code. I get hierarchical data from the service but could not align in the below format.

I tried using margins, float, but cannot format the layout properly.

please find the HTML markup below:

<div id="CountryList" style="display: block; width: 100%;">
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />United States of America
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />New York
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Iowa
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Texas
    </div>
</div>
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />Australia
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />New South Wales
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Queensland
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Victoria
    </div>
</div>
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />India
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Andhra Pradesh
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Tamilnadu
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Karnataka
    </div>
</div>

Any help in this regard is highly appreciated.

Answer 1

It should be what you need. See that I removed all your inline styles, you don't need .country-parent and .country-child classes too. If you don't need them to something else, remove them.

• #CountryList > div is the same as .country-parent from your HTML
  
• #CountryList > div > div is the same as .country-child from your HTML
  
• + div is sibling selector, it means the second one and each other. I use it to make a gap between cols (indent second and third parent div) and indent children.

 

<style>
    #CountryList > div {float: left;}
    #CountryList > div + div {margin-left: 30px;} /* gap between columns */
    #CountryList > div > div + div {margin-left: 30px;} /* indent hierarchy */
</style>

<div id="CountryList">
    <div>
        <div>
            <input type="checkbox" class="country-parent" />United States of America
        </div>
        <div>
            <input type="checkbox" class="country-child" />New York
        </div>
        <div>
            <input type="checkbox" class="country-child" />Iowa
        </div>
        <div>
            <input type="checkbox" class="country-child" />Texas
        </div>
    </div>
    <div>
        <div>
            <input type="checkbox" class="country-parent" />Australia
        </div>
        <div>
            <input type="checkbox" class="country-child" />New South Wales
        </div>
        <div>
            <input type="checkbox" class="country-child" />Queensland
        </div>
        <div>
            <input type="checkbox" class="country-child" />Victoria
        </div>
    </div>
    <div>
        <div>
            <input type="checkbox" class="country-parent" />India
        </div>
        <div>
            <input type="checkbox" class="country-child" />Andhra Pradesh
        </div>
        <div>
            <input type="checkbox" class="country-child" />Tamilnadu
        </div>
        <div>
            <input type="checkbox" class="country-child" />Karnataka
        </div>
    </div>
</div>

https://jsfiddle.net/m6hhn1da/