title: want to extend the width of textbox to the left side instead of right side
body: <p>in this code the width of textbox extends to right side but i want to extend the width to left side without aligning the textbox to right side</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#textbox1").on('click', function() {
    $("#textbox1").animate({
      width: 800
    }, 'slow');
  }).on('blur', function() {
    $("#textbox1").animate({
      width: 245
    }, 'slow');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
  alpha.6/css/bootstrap.min.css" integrity="sha384-
  rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;button id="btn1" class="btn btn-primary"&gt;button&lt;/button&gt;
          &lt;br&gt;
          &lt;h2 id="accordion" style="display: none;"&gt;First Example Of Jquery&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
          &lt;h2&gt;Search&lt;/h2&gt;
          &lt;input type="text" id="textbox1" name="txt" class="form-control"&gt;
          &lt;button id="btn2" class="btn btn-primary"&gt;Search&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>