Empty space between tab and content

Question

I want to display the contents of each tab. But there is an empty space.

There is no free space in the first tab but it exists in other tabs. I want to remove this gap

How to fix this problem? (Please do not suggest any Java Script code.)

The following figure shows this problem

There is an empty space between the tab and the content

.tab-caption:nth-of-type(1) {
    background-color: #FFAAAA;
}

.tab-caption:nth-of-type(2) {
    background-color: #AAFFAA;
}

.tab-caption:nth-of-type(3) {
    background-color: #AAAAFF;
}

.tab-content:nth-of-type(1) {
    background-color: #FFAAAA;
}

.tab-content:nth-of-type(2) {
    background-color: #AAFFAA;
}

.tab-content:nth-of-type(3) {
    background-color: #AAAAFF;
}

.tab-status {
    display: none;
}

    .tab-status ~ .tab-caption-container {
        display: flex;
    }

        .tab-status ~ .tab-caption-container > .tab-caption {
            opacity: 0.4;
            cursor: pointer;
        }

    .tab-status:nth-of-type(1):checked ~ .tab-caption-container > .tab-caption:nth-of-type(1) {
        opacity: 1;
    }

    .tab-status:nth-of-type(2):checked ~ .tab-caption-container > .tab-caption:nth-of-type(2) {
        opacity: 1;
    }

    .tab-status:nth-of-type(3):checked ~ .tab-caption-container > .tab-caption:nth-of-type(3) {
        opacity: 1;
    }

    .tab-status ~ .tab-content-container > .tab-content {
        width: 100%;
        transform: translate(-100%);
        transition: all 1s;
    }

    .tab-status:nth-of-type(1):checked ~ .tab-content-container > .tab-content:nth-of-type(1),
    .tab-status:nth-of-type(2):checked ~ .tab-content-container > .tab-content:nth-of-type(2),
    .tab-status:nth-of-type(3):checked ~ .tab-content-container > .tab-content:nth-of-type(3) {
        transition: all 1s;
        transform: translate(0%);
        transition-delay: 1s;
    }

.tab-content-container {
    overflow: hidden;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    float: left;
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked">
    <input class="tab-status" id="tabSwitch02" type="radio" name="tab">
    <input class="tab-status" id="tabSwitch03" type="radio" name="tab">
    <div class="tab-caption-container">
        <label class="tab-caption" for="tabSwitch01">tab1</label>
        <label class="tab-caption" for="tabSwitch02">tab2</label>
        <label class="tab-caption" for="tabSwitch03">tab3</label>
    </div>
    <div class="tab-content-container">
        <div class="tab-content">tab1-data<br></div>
        <div class="tab-content">tab2-data<br>tab2-data<br></div>
        <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div>
    </div>

Answer 1

I changed the CSS for .tab-content such that the height is animated also. I also removed the float for .tab-content-container since it didn't have any purpose.

.tab-caption:nth-of-type(1) {
  background-color: #FFAAAA;
}

.tab-caption:nth-of-type(2) {
  background-color: #AAFFAA;
}

.tab-caption:nth-of-type(3) {
  background-color: #AAAAFF;
}

.tab-content:nth-of-type(1) {
  background-color: #FFAAAA;
}

.tab-content:nth-of-type(2) {
  background-color: #AAFFAA;
}

.tab-content:nth-of-type(3) {
  background-color: #AAAAFF;
}

.tab-status {
  display: none;
}

.tab-status~.tab-caption-container {
  display: flex;
}

.tab-status~.tab-caption-container>.tab-caption {
  opacity: 0.4;
  cursor: pointer;
}

.tab-status:nth-of-type(1):checked~.tab-caption-container>.tab-caption:nth-of-type(1) {
  opacity: 1;
}

.tab-status:nth-of-type(2):checked~.tab-caption-container>.tab-caption:nth-of-type(2) {
  opacity: 1;
}

.tab-status:nth-of-type(3):checked~.tab-caption-container>.tab-caption:nth-of-type(3) {
  opacity: 1;
}

.tab-status~.tab-content-container>.tab-content {
  width: 100%;
  transform: translate(-100%);
  transition: all 1s;
  height: 0;
}

.tab-status:nth-of-type(1):checked~.tab-content-container>.tab-content:nth-of-type(1),
.tab-status:nth-of-type(2):checked~.tab-content-container>.tab-content:nth-of-type(2),
.tab-status:nth-of-type(3):checked~.tab-content-container>.tab-content:nth-of-type(3) {
  transition: all 1s;
  transform: translate(0%);
  transition-delay: 1s;
  height: 100%;
}

.tab-content-container {
  overflow: hidden;
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked">
<input class="tab-status" id="tabSwitch02" type="radio" name="tab">
<input class="tab-status" id="tabSwitch03" type="radio" name="tab">
<div class="tab-caption-container">
  <label class="tab-caption" for="tabSwitch01">tab1</label>
  <label class="tab-caption" for="tabSwitch02">tab2</label>
  <label class="tab-caption" for="tabSwitch03">tab3</label>
</div>
<div class="tab-content-container">
  <div class="tab-content">tab1-data<br></div>
  <div class="tab-content">tab2-data<br>tab2-data<br></div>
  <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div>
</div>