Although it is not very clear (without markup) in your question, it seems your form elements (labels and inputs) are not wrapped in their respective containers and are on their own.
You are preventing break on labels only, and hence the inputs are not bound by that rule. This is the reason you are facing that problem.
Best solution would be to wrap your label-input sets in their own containing divs and apply break-inside: avoid on those divs.
Example:
* { box-sizing: border-box; }
form { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
form > div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }
form label, form input { display: inline-block; margin: 4px 0px; }
form input[type=text] { width: 50%; }
<form>
<div>
<input id="chk1" type="checkbox" /><label for="chk1">Mobile</label>
</div>
<div>
<input id="chk2" type="checkbox" /><label for="chk2">Animated</label>
</div>
<div>
<label for="txt1">Input 1:</label><input id="txt1" type="text" />
</div>
<div>
<label for="txt2">Input 2:</label><input id="txt2" type="text" />
</div>
<div>
<label for="txt3">Input 3:</label><input id="txt3" type="text" />
</div>
<div>
<label for="txt4">Input 4:</label><input id="txt4" type="text" />
</div>
<div>
<label for="txt5">Input 5:</label><input id="txt5" type="text" />
</div>
<div>
<label for="txt6">Input 6:</label><input id="txt6" type="text" />
</div>
</form>
Fiddle to see the effect of resizing: http://jsfiddle.net/abhitalks/jd7v0n8e/
Note: Last style rule in the above example is to prevent overflow of the inputs when the the available space is less than their default width.
Edit:
(after Op's comment)
Now that you have provided your markup, this arrangement should also work. As long as you are sure that all inputs are properly wrapped inside those labels.
See this snippet:
* { box-sizing: border-box; }
form{
-webkit-column-count: 2;
column-count: 2;
}
label {
display: block; margin: 2px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
input {
border: 1px solid green;
width: 50%;
}
<form>
<label>This: <input type="text" /></label>
<label>This is long: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This is much longer than before: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
</form>
And also this fiddle: http://jsfiddle.net/abhitalks/38wjpu28/3/
It seems that there must be something else going on in your markup besides what you have shown in your question.
Note 2: I would recommend going with a wrapping div and keeping the label and input separate. This would allow you greater control in case you need to change the layouts later on. (e.g. when you need to put label on top of input instead of side by side)
