My bootstrap columns inside Kendo window with tabstrips are collapsing

I have a very specific problem. I have a kendo window that has a left tabstrip navigation and inside each tab there is a form wizard. The form is using bootstrap to columnize each form input.

I am using 'col-xs-6' which should put two forms inline with each other but they are not. I have tried to place a container-fluid div from this solution here and here (hack, but didn't work) have also tried to resize the width of the window but the two forms still collapse on each other.

The only solution to this is if I change the cols to 'col-xs-5' but if 'xs' is to never collapse, and col-xs-6 is supposed to take 50% of the divs width, then why is it stacking? I appreciate the help!

Desired solution image:

Here is my code:

<div class="container-fluid">
    <form id="general-info" method="POST" action="#">
        <fieldset>
        <legend>General Information</legend>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-6">
                        <label for="company-name">Company Name *</label>
                        <input class="form-control required" id="company-name" name="#" type="text" />
                    </div>
                    <div class="col-xs-6">
                        <label for="client-id">ClientId *</label>
                        <input class="form-control required" id="client-id" name="#" type="text" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-6">
                        <label for="account-manager">Account Manager</label>
                        <input class="form-control" id="account-manager" name="#" type="text" />
                    </div>
                    <div class="col-xs-6">
                        <label for="manager-email">Account Manager Email</label>
                        <input class="form-control" id="manager-email" name="#" type="text" />
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Client Information</legend>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-3">
                        <img id="image" src="#" height="100" width="200" />
                    </div>
                    <div class="col-xs-6">
                        <p>Select a logo to upload</p>
                        <p class="text-muted">Valid File Types: jpg, jpeg, png, bmp, gif</p>
                        <input type="file" class="form-control-file required" id="photos" onchange="readURL(this);" />
                    </div>
                    <div class="col-xs-6 client-domain">
                        <label for="domain-prefix">Domain Prefix *</label>
                        <input class="form-control required" id="domain-prefix" name="#" type="text" />
                    </div>
                </div>
            </div>
        </fieldset>
        <hr>
        <fieldset>
            <div class='modal-buttons'>
                <div style='float: left;'>
                    <button class="save-button">Save</button>
                    <button class="close-button">Close</button>
                </div>
                <div style='float: right;'>
                    <button class="next-button">Next</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

I found the solution to the problem in Kendo's documentation, here. I know there may be some people who will run into this problem in the future. I hope this answer finds them well.

Basically, Kendo UI uses the default content-box box model while boostrap uses the non-default border-box model and applies it to all elements on the page, including unrelated ones, in which this case, Kendo Windows. To override Bootstrap's CSS, you can apply content-box box model to all elements like so:

*, :before, :after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

and then use border-box model only to Bootstrap elements which needs it:

.form-control,
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

I hope this helps. Happy coding!