Bootstrap CSS Mobile Resize Issue - html

Question

I am running into an issue using Bootstrap when re-sizing the page to a mobile size. The input form is shifting to inline and the glyphicon I am using is not staying in the same position once the window is resized. I have included 2 pictures below on how it looks before and after resizing the window.
HTML code for input section:
<div class="col-sm-4" id="end">
<div class="row">
<div class="col-sm-6" id="start">
<span class="top">Date and Time</span>
<div class="input-group">
<div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time"></span></div>
<input type="text" class="col-xs-4" id="date">
<input type="text" class="col-xs-4" id="time">
</div>
<button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button>
</div>
<div class="col-sm-6" id="start">
</div>
</div>
</div>
CSS for the date and time ID's:
#date {
max-width: 100px;
min-width: 100px;
font-size: 12px;
}
#time {
max-width: 100px;
min-width: 100px;
margin-bottom: 0px;
font-size: 12px;
}
Normal sized look
Mobile sized look

Answer 1

If you sizing your #date and #time both to min-width: 100px and max-width: 100px as well, your div's wont be bigger or smaller then 100px.
Maybe you should use three declarations like:
width: 150px, min-width: 100px and max-width: 200px;
Another way would be the percentage sizing or #media screen and (...)
w3schools has a really good docu to figured it out an learn how to handle with all the diffrent ways of sizing.

Answer 2

It's not the most beautiful solution, but you can try to force the "input" to be wide as it can be with class="col-lg-12".
Like this:
<div class="col-sm-4" id="end">
<div class="row">
<div class="col-sm-6" id="start">
<span class="top">Date and Time</span>
<div class="input-group">
<div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time" ></span></div>
<input type="text" class="col-lg-12" id="date">
<input type="text" class="col-lg-12" id="time">
</div>
<button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button>
</div>
<div class="col-sm-6" id="start">
</div>
</div>