Applying a css rule on a list of checkbox button options

I have an object having a list of items. I want to display them as checkbox buttons. I am using the following snippet of the code to generate the radio buttons. They are working fine.

for (var i = 0; i < mObject.removeList.length; i++) {
    //Todo add logic of checkbox here
    var lineBreak = "";
    if ((i+1) % 3 == 0)
    {
        lineBreak = "<br />";
    }

    $('#' + listsDiv + 'RemoveList').append('<input type="checkbox" name="' + mObject.removeList[i].ItemName + '" value="' + mObject.removeList[i].ItemName + '" />' + mObject.removeList[i].ItemName + lineBreak);
}

The problem is I want to display them 3 per row and distributed evenly in a row. I have managed to divide them in rows of three, but I cant get my head around making them styled in three columns every line. If I use css for adding a margin-right on checkboxes they are spearated but not evenly aligned in columns because of the length of the text of checkbox.

I was hoping to find a CSS solution for making them display in rows of 3 columns with alignment of each checkbox to the left of their respective column.

The number of items is unknown in the list.

Currently, this css does not give the required output.

input[type="radio"], input[type="checkbox"] {
    margin-left:25px;
}