CSS issue for internet explorer 9 and 10

Question

I am implementing a simple tab like structure. Where when you click tab it will open some content. The issue is that when I click first tab the second and third one moves, ideally they should not. For all latest version i am using flex so the issue is only IE9 and IE10 specific which does not support flexbox.

.tab {
    background: #eee;
    cursor: pointer;
    padding: 10px 15px 10px 20px;
    display: inline-block;
}

.tab-radio:checked + .tab {
    background: #000000;
    color: #ffffff;
}

.tab-radio {
    display: none;
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-radio:checked + label + .tab-content {
    display: block;
}

<div class="accordion">
    <!-- "For" should point to the input so that we can check the radio using the label. -->
    <input id="1" class="tab-radio" name="tab-choice" type="radio"/>
    <label class="tab" for="1">title 1</label>
    <div class="tab-content">
      <h4>Heading 1</h4>
      Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[].
    </div>
    <input id="2" class="tab-radio" name="tab-choice" type="radio"/>
    <label class="tab" for="2"> title 2 which is really long</label>
    <div class="tab-content">
      <h4>Heading 2</h4>
      Now that we have our top-level application component, let’s write the ProductsList component,   
    </div>
    <input id="3" class="tab-radio" name="tab-choice" type="radio"/>
    <label class="tab" for="3">title 3</label>
    <div class="tab-content">
      <h4>Heading 3</h4>
      Why is that wrong? Well, because in the case where your browser loads that template before Angular has run,
     
    </div>
  </div>

Answer 1

Try using float and negative margin to position the tabs different from the content

.tab {
  background: #eee;
  cursor: pointer;
  padding: 10px 15px 10px 20px;
  float: left;
}

.tab-radio:checked + .tab {
  background: #000000;
  color: #ffffff;
}

.tab-radio {
  display: none;
}

.tab-content {
  display: none;
  width: 100%;
  float: right;
  margin : 2.5em 0 0 -100%;
}

.tab-radio:checked + label + .tab-content {
  display: block;
}

<div class="accordion">
  <!-- "For" should point to the input so that we can check the radio using the label. -->
  <input id="1" class="tab-radio" name="tab-choice" type="radio" />
  <label class="tab" for="1">title 1</label>
  <div class="tab-content">
    <h4>Heading 1</h4> Notice that we’ve renamed the variable product to products, and we’ve changed the type to Product[].
  </div>
  <input id="2" class="tab-radio" name="tab-choice" type="radio" />
  <label class="tab" for="2"> title 2 which is really long</label>
  <div class="tab-content">
    <h4>Heading 2</h4> Now that we have our top-level application component, let’s write the ProductsList component,
  </div>
  <input id="3" class="tab-radio" name="tab-choice" type="radio" />
  <label class="tab" for="3">title 3</label>
  <div class="tab-content">
    <h4>Heading 3</h4> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run,

  </div>
</div>