const BASICO = document.querySelector(".left h4");
const PREMIUM = document.querySelector(".right h4");

const BASICOTAB = document.querySelector("div#basico");
const PREMIUMTAB = document.querySelector("div#premium");

BASICOTAB.setAttribute("style", "visibility: hidden; max-height: 0; opacity: 0;");
PREMIUMTAB.setAttribute("style", "visibility: hidden; max-height: 0; opacity: 0;");

function revealLeft(e) {
  e.preventDefault();
  if (BASICOTAB.hasAttribute("style", "visibility: hidden;")) {
      BASICOTAB.setAttribute("style", "visibility: visible; max-height: 100%; transition: all 1s;");
    } else {
      BASICOTAB.setAttribute("style", "visibility: hidden; max-height: 0; opacity: 0;");
    }
  PREMIUMTAB.setAttribute("style", "visibility: hidden; max-height: 0;");
}

function revealRight(e) {
  e.preventDefault();
  if (PREMIUMTAB.hasAttribute("style", "visibility: hidden;")) {
      PREMIUMTAB.setAttribute("style", "visibility: visible; max-height: 100%; transition: all 1s;");
    } else {
      PREMIUMTAB.setAttribute("style", "visibility: hidden; max-height: 0; opacity: 0;");
    }
  BASICOTAB.setAttribute("style", "visibility: hidden; max-height: 0;");
}

BASICO.onclick = revealLeft;
PREMIUM.onclick = revealRight;

<article>
        <h3>planes adaptados a ti</h3>
          <div class="contenido planes">
              <div class="columna left">
                <h4><a href="">plan basico</a></h4>
                <div id="basico">
                  <h5>asistencia médica</h5>
                    <p>más de 10 servicios a tu alcance.</p>
                  <h5>asistencia vial</h5>
                    <p>más de 6 servicios a tu alcance.</p>
                  <h5>asistencia funeraria</h5>
                    <p>más de 2.000.000 en coberturas.</p>
                  <h5>asistencia odontológica</h5>
                    <p>servicios ilimitados a tu alcance.</p>
                </div>
              <button class="btn">adquirir plan</button>
            </div>
            <div class="columna right">
                <h4><a href="">plan premium</a></h4>
                <div id="premium">
                  <h5>asistencia médica</h5>
                    <p>más de 10 servicios a tu alcance.</p>
                  <h5>asistencia vial</h5>
                    <p>más de 6 servicios a tu alcance.</p>
                  <h5>asistencia funeraria</h5>
                    <p>más de 2.000.000 en coberturas.</p>
                  <h5>asistencia odontológica</h5>
                    <p>servicios ilimitados a tu alcance.</p>
                </div>
                <button class="btn">adquirir plan</button>
            </div>
           </div>
      </article>