mark_spencer mark_spencer - 3 years ago 222
CSS Question

Align input to left in div

I have div with 2 divs in it

In one div is text, in second input

Here is code

<div id="main-info" style="margin-top: 30px;">
<div class="row">
<div class="col-xs-6 blue-text">
Diffuculty of investigation
</div>
<div class="col-xs-6">
<input class="form-control"/>
</div>
</div>
</div>


And CSS

.form-control {
display: block;
width: 100%;
height: 34px;
position: relative;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
margin: 0 auto;
background-color: #fff;
border-color: #1f66b4;
border-style: solid;
border-width: 3px;
background-image: none;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


I have View like this
enter image description here

But I need to make it like this
enter image description here

So input will be closer to text.

How I need to rewrite code?

Answer Source
<div class="row">
  <div class="xs-hidden col-md-2 "></div>
  <div class="col-xs-6 col-md-4 blue-text">
    Diffuculty of investigation
  </div>
  <div class="col-xs-6 col-md-4 ">
    <input class="form-control"/>
  </div>
  <div class="xs-hidden col-md-2 "></div>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download