Edit in JSFiddle

<div class="accordion">
 <input checked id="accordion-1" type="radio" name="accordion" />
  <div class="accordion-item">
    <label for="accordion-1" class="accordion-title">
      <span>Accordin 1</span>
    </label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 1 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
  <input id="accordion-2" type="radio" name="accordion" />
  <div class="accordion-item">
    
    <label for="accordion-2" class="accordion-title">
      <span>Accordin 2</span>
    </label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 2 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
      <input id="accordion-3" type="radio" name="accordion" />
  <div class="accordion-item">
    <label for="accordion-3" class="accordion-title">
      <span>Accordin 3</span>
    </label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 3 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
</div>
* {
  padding: 0;
  box-sizing: border-box;
}

.accordion {
  border: 1px solid black;
  display: flex;
  height: 400px;
  position:relative;
  
  input {
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    border: 1px solid red;
    display: block;
    margin: 0;
    position:absolute;
    
    &+.accordion-item .accordion-content {
      overflow: hidden;
      flex: none;
      max-width: 0;
    }
    &+.accordion-item .accordion-title:after {
      content: '';
      position: absolute;
      right: 15px;
      top: 12px;
      width: 8px;
      height: 8px;
      border-width: 0 0 2px 2px;
      border-color: black;
      border-style: solid;
      transform: rotate(-45deg);
      transform-origin: center;
      transition: .2s linear;
    }
    &+.accordion-item .accordion-content .content {
      padding: 10px 10px;
      p {
        margin-bottom: 10px;
      }
    }
    &:checked+.accordion-item {
      flex: 1;
    }
    &:checked+.accordion-item .accordion-title:after {
      top: 15px;
      transform: rotate(135deg);
    }
    &:checked+.accordion-item .accordion-content {
      flex: 1;
      max-width: initial;
    }
  }
  .accordion-item {
    margin: 0;
    height: 100%;
    display: flex;
    flex: 0;
    .accordion-title {
      display: block;
      padding: 10px 10px;
      background: #00aaff;
      border-left: 1px solid black;
      font-size: 16px;
      text-transform: uppercase;
      font-family: monospace;
      height: 100%;
      width: 40px;
      position: relative;
      span {
        transform: rotate(-90deg);
        display: block;
        position: absolute;
        top: 80px;
        left: -28px;
        white-space: nowrap;
      }
    }
    
    &:first-of-type .accordion-title {
      border-left: 0;
    }
  }
  .accordion-content p {
    margin-top: 0;
  }
}