title: Dynamic div side by side
body: <p>It's a possibility that I'm asking a duplicate question. I searched on SO and nothing came close to my problem nor did I find any helpful answers. I am relatively new in the CSS world so any help would be appreciated.</p>
  
  <p>I have two div inside a container which I want to put side by side. Inside the second div, I am placing an icon which is not fixed. If some condition was satisfied then that icon would hide. Another requirement is that When the window shrinks, I want both elements to show and preferably shrinking div1 and making the icon intact and the same size so that both are visible.</p>
  
  <pre><code>&lt;div class="main-container"&gt;
              &lt;div class="div1"&gt;&lt;/div&gt;
              &lt;div class="div2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following CSS worked for me and satisfies all my requirements, but not working on IE10 because of flex.</p>
  
  <pre><code>.main-container
  {
      display: flex;
  }
  
  .div1
  {
      position: relative;
      border: 1px solid &lt;#=styles["subduedBorderColor"]#&gt;;
      background-color: &lt;#=styles["controlBackgroundColor"]#&gt;;
      height: 24px;
      padding: 3px;
      margin: 6px 2px 0 16px;
      width: 100%;
  }
  </code></pre>
  
  <p>I tried another approach here, but div1 had a fixed size and looking bad when icon is not present. I want div1 to take the full space when no icon is there.</p>
  
  <pre><code>.main-container
  {
      white-space: nowrap;
      width: 100%
  }
  
  .div1
  {
      position: relative;
      border: 1px solid &lt;#=styles["subduedBorderColor"]#&gt;;
      background-color: &lt;#=styles["controlBackgroundColor"]#&gt;;
      height: 24px;
      padding: 3px;
      margin: 6px 2px 0 16px;
      width: 85%; /* fallback if needed */
      width: calc((100%) - 50px);
      display: inline-block;
  }
  
  .div2
  {
      display: inline-block;
  }
  </code></pre>
  
  <p>I am struggling since yesterday, and really appreciate any help on this.</p>