title: CSS How to make element in the middle to shrink before its sibling jumps down
body: <p>I have 3 <code>&lt;divs&gt;</code> in a parent <code>&lt;div&gt;</code> they all are <code>inline-block</code></p>
  
  <p><a href="https://i.stack.imgur.com/vUdyS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vUdyS.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/5bht0ny5/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>When I reduce the width of window 'Continue button' jumps down </p>
  
  <p><a href="https://i.stack.imgur.com/tDlO1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tDlO1.png" alt="enter image description here"></a></p>
  
  <p>while what I want is for 'Please click continue to purchase' wrap till it is shrank to nothing before 'Continue' jumps down.</p>
  
  <p><a href="https://i.stack.imgur.com/pze6L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pze6L.png" alt="enter image description here"></a></p>
  
  <p>Continue button has fixed <code>width : 127px</code>and background is sprite.</p>
  
  <p>I have tried adding <code>%</code> and <code>em</code> widths to 'Please click continue to purchase' but what happens it wraps last word while 'Continue' button still jumps down. Adding fixed width on 'Please click continue to purchase' is not an option since requirement is that it has to be one line for as long as possible.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" style="-ms-overflow-y: scroll;"&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
  * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
  article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block;
  }
  body {
   margin: 0;
  }
  html {
   font-family: sans-serif;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
  }
  a {
   background: transparent;
  }
  *::before, *::after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
  .price-and-button {
   display: block;
  }
  .premium-wrapper {
   border: 3px solid #2280c4;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   padding: 15px;
  }
  .legal.premium-wrapper {
   border-radius: 30px;
   border-width: 2px;
   padding-left: 3em;
   padding-right: 3em;
  }
  .lpa-quote-wrapper .premium-wrapper, .conveyancing-quote-wrapper .premium-wrapper, .summary-fee-breakdown .premium-wrapper {
   border: 1px solid #2280c4;
   *zoom: 1: ;
  }
  .premium-wrapper.legal::before, .premium-wrapper.legal::after {
   content: none;
  }
  .lpa-quote-wrapper .premium-wrapper::before, .conveyancing-quote-wrapper .premium-wrapper::before, .summary-fee-breakdown .premium-wrapper::before, .lpa-quote-wrapper .premium-wrapper::after, .conveyancing-quote-wrapper .premium-wrapper::after, .summary-fee-breakdown .premium-wrapper::after {
   display: table;
   content: "";
   line-height: 0;
  }
  .lpa-quote-wrapper .premium-wrapper::after, .conveyancing-quote-wrapper .premium-wrapper::after, .summary-fee-breakdown .premium-wrapper::after {
   clear: both;
  }
  .sections-wrapper {
   margin-bottom: 27px;
  }
  .left-column {
   margin: 38px 0 0 76px;
  }
  .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 {
   position: relative;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
  }
  /* @media all and (min-width:992px) */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
   float: left;
  }
  /* @media all and (min-width:992px) */
  .col-md-8 {
   width: 66.66%;
  }
  .row {
   margin-left: -15px;
   margin-right: -15px;
  }
  /* @media all and (min-width:1200px) */
  .container {
   width: 1010px;
  }
  .clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after {
   content: " ";
   display: table;
  }
  .clearfix::after, .container::after, .container-fluid::after, .row::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .form-horizontal .form-group::after {
   clear: both;
  }
  .content-container {
   background-color: #ffffff;
   min-height: 400px;
   box-shadow: 25px 0px 25px -25px #333333, -25px 0px 25px -25px #333333;
   -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
   border-radius: 10px 10px 0px 0px;
   -moz-border-radius: 9px 9px 0px 0px;
   -webkit-border-radius: 9px 9px 0px 0px;
   border-radius: 9px 9px 0px 0px;
  }
  .container {
   margin-right: auto;
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
  }
  /* @media all and (min-width:768px) */
  .container {
   width: 750px;
  }
  /* @media all and (min-width:992px) */
  .container {
   width: 970px;
  }
  /* @media all and (min-width:1200px) */
  .container {
   width: 1170px;
  }
  .body-wrap {
   background: url(../images/saga-home/background-gradient.png) repeat-x;
   background-attachment: fixed;
   min-height: 500px;
  }
  body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.4285;
   color: #333333;
   background-color: #ffffff;
  }
  body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   color: #333333;
   background-color: #ffffff;
  }
  html {
   font-size: 62.5%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .price-and-button-cell {
   display: inline-block;
  }
  .please-click-to-continue {
   padding-right: 0.7em;
   position: relative;
   top: -15px;
  }
  .bottom-buttons, .summary-group-bottom-buttons, .premium-bottom-buttons {
   margin-top: 30px;
   min-height: 38px;
   position: relative;
   width: 100%;
  }
  .legal.bottom-buttons {
   width: 130px;
   top: -2px;
  }
  .button-and-shadow-container {
   float: right;
  }
  .bottom-buttons .button-and-shadow-container, .summary-group-bottom-buttons .button-and-shadow-container, .premium-bottom-buttons .button-and-shadow-container {
   float: right;
  }
  a {
   color: #428bca;
   text-decoration: none;
  }
  a {
   color: #0088cc;
   text-decoration: none;
  }
  .lpa-quote-wrapper a, .conveyancing-quote-wrapper a, .summary-fee-breakdown a {
   cursor: pointer;
   text-decoration: underline;
  }
  .bottom-buttons .button-green-small, .summary-group-bottom-buttons .button-green-small, .premium-bottom-buttons .button-green-small, .bottom-buttons .button-blue-small, .summary-group-bottom-buttons .button-blue-small, .premium-bottom-buttons .button-blue-small, .bottom-buttons .button-green-medium, .summary-group-bottom-buttons .button-green-medium, .premium-bottom-buttons .button-green-medium, .bottom-buttons .button-blue-medium, .summary-group-bottom-buttons .button-blue-medium, .premium-bottom-buttons .button-blue-medium, .bottom-buttons .button-green-large, .summary-group-bottom-buttons .button-green-large, .premium-bottom-buttons .button-green-large, .bottom-buttons .button-blue-large, .summary-group-bottom-buttons .button-blue-large, .premium-bottom-buttons .button-blue-large, .bottom-buttons .button-green-extra-large, .summary-group-bottom-buttons .button-green-extra-large, .premium-bottom-buttons .button-green-extra-large, .bottom-buttons .button-green-extra-large-lm, .summary-group-bottom-buttons .button-green-extra-large-lm, .premium-bottom-buttons .button-green-extra-large-lm, .bottom-buttons .button-blue-extra-large, .summary-group-bottom-buttons .button-blue-extra-large, .premium-bottom-buttons .button-blue-extra-large {
   border: none;
   color: #f2f5fd;
   display: block;
   font-weight: 700;
   height: 38px;
   line-height: 38px;
   text-align: center;
   text-decoration: none;
  }
  .bottom-buttons .button-green-large, .summary-group-bottom-buttons .button-green-large, .premium-bottom-buttons .button-green-large, .bottom-buttons .button-blue-large, .summary-group-bottom-buttons .button-blue-large, .premium-bottom-buttons .button-blue-large {
   width: 135px;
  }
  .bottom-buttons .button-green-large, .summary-group-bottom-buttons .button-green-large, .premium-bottom-buttons .button-green-large {
   background: #16C52F 0 -304px;
  }
  h1, h2, h3, h4, h5, h6 {
   margin: 9px 0;
   font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: normal;
   line-height: 18px;
   color: #2280c4;
   text-rendering: optimizelegibility;
  }
  h1, h2, h3 {
   line-height: 36px;
  }
  h2 {
   font-size: 24px;
  }
  .premium-wrapper h2 {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .premium-wrapper h2:first-child {
   margin: 0;
  }
  .lpa-quote-wrapper .premium-wrapper h2, .conveyancing-quote-wrapper .premium-wrapper h2, .summary-fee-breakdown .premium-wrapper h2 {
   *zoom: 1: ;
  }
  .lpa-quote-wrapper .premium-wrapper h2::before, .conveyancing-quote-wrapper .premium-wrapper h2::before, .summary-fee-breakdown .premium-wrapper h2::before, .lpa-quote-wrapper .premium-wrapper h2::after, .conveyancing-quote-wrapper .premium-wrapper h2::after, .summary-fee-breakdown .premium-wrapper h2::after {
   display: table;
   content: "";
   line-height: 0;
  }
  .lpa-quote-wrapper .premium-wrapper h2::after, .conveyancing-quote-wrapper .premium-wrapper h2::after, .summary-fee-breakdown .premium-wrapper h2::after {
   clear: both;
  }
  .legal.premium-wrapper h2.your-quote {
   padding: 0;
   width: 6em;
  }
  .premium-wrapper h2 span {
   display: block;
  }
  .premium-wrapper h2 span + span {
   color: #333333;
   font-size: 18.2px;
   line-height: 20px;
  }
  .lpa-quote-wrapper .premium-wrapper h2 span, .conveyancing-quote-wrapper .premium-wrapper h2 span, .summary-fee-breakdown .premium-wrapper h2 span {
   float: left;
  }
  .legal.premium-wrapper h2 span + span {
   color: #2280c4;
   font-size: 24px;
   line-height: 36px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;div class="sections-wrapper"&gt;&lt;section&gt;&lt;div class="premium-wrapper legal "&gt;&lt;div class="price-and-button"&gt;
                          &lt;div style="display: block;"&gt;
                              &lt;div class="price-and-button-cell"&gt;
                                  &lt;h2 class="your-quote"&gt;
                                      &lt;span&gt;Your Quote&lt;/span&gt;
                                      &lt;span&gt;
                                          £847.20
                                      &lt;/span&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div class="price-and-button-cell magic-magic-disappear please-click-to-continue"&gt;Please click continue to purchase&lt;/div&gt;
                              &lt;div class="bottom-buttons legal price-and-button-cell"&gt;
                                  &lt;div class="button-and-shadow-container"&gt;
                                      &lt;a class="button-green-large" href="/legal-services/Lpa/customerDetails?product=Property%20and%20finance%20AND%20health%20and%20welfare"&gt;Continue&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>How to make element in the middle to shrink before its sibling jumps down?</strong></p>