My original CSS works with most ereaders but fails with Kindle because you cannot use psuedo elements ::before and calc:

.timeline {
 position: relative;
 padding: 0;
 margin: 0;
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 -webkit-flex-direction: column;
}

.timeline-group {
 position: relative;
 margin-bottom: 2em;
 padding-left: 2em;
 page-break-inside: avoid;
 break-inside: avoid;
}

.timeline-event::before {
    content: "";
    height: 2px;
    width: 1.5em; /* Adjust the width to match the left padding */
   background-color: orange;
    position: absolute;
    left: -2em;
    top: 30%; /* Adjust to align with the content */
  break-inside: avoid; /* Ensure events don't break across pages */
  page-break-inside: avoid;
 } 
 
.timeline-event {
  position: relative;
  margin: 1em 0;
  padding-left: 2em;
  bottom:0;
  break-inside: avoid; /* Ensure events don't break across pages */
  page-break-inside: avoid;
}

.timeline-content {
    padding: 1em;
    margin: 0 1em 0 -2.5em;
    background-color: #EFEFEF;
    border-left: 5px solid #425695;
    border-radius: 0.5em;
    break-inside: avoid; /* Ensure events don't break across pages */
    page-break-inside: avoid;
}

.timeline-event h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
}

.timeline-event p {
    margin: 0;
}


.timeline-year::before {
   content: '';
   position: absolute;
   top: 2.0rem; /* Adjust this value to match the padding/margin of timeline-year */
  left: 0;
   bottom: 0; /* Extend the line to the bottom of the parent */
   height: calc(100vh - 62px); /* calc() No work on Kindle */
   height: -moz-calc(100% - 62px);
   height: -webkit-calc(100% - 62px);
   width: 2px;
   background-color: #ff0000;
}

.timeline-year {
  /* inline-size: fit-content; No Work with Kindle*/
  display: inline-block;
  width: 2.5em;
  padding: .25rem .75rem;
  background-color: #425695;
  font-size: 1.5em;
  color: #ffffff;
  margin-bottom: 1em;
}

.timeline-date {
  display: inline-block;
  width: auto;
  padding: .25rem 1.25rem .25rem;
  margin-bottom: .5em;
  background-color:  #ffffff;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  color: currentColor;
}


body.timeline02 {
  font-family: var(--ds-typography-main-font-family, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif);
  font-size: var(--ds-typography-main-font-size, .75rem);
  color: var(--ds-typography-main-color, #222);
  line-height: var(--ds-typography-main-line-height, 1.75);
  background-color: #ffffff;
  margin: 0;
}

My HTML looks like:

 <section class="timeline">

    <div class="timeline-year" aria-hidden="true">1840</div>
     <div class="timeline-group">
        <div class="timeline-event">
            <div class="timeline-content">
            <div class="timeline-date">
                <time datetime="1840-03-01">01 March 1840</time>
            </div>
                <h3>Birth of Some Guy</h3>
                <p>3rd son born to a family in Ohio.</p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->
    </div> <!-- End 1840 timeline-group -->

  <div class="timeline-year" aria-hidden="true">1858</div>
     <div class="timeline-group">
        <div class="timeline-event">
            <div class="timeline-content">
            <div class="timeline-date">
                <time datetime="1858-01-01">1858</time>
            </div>
                <h3>Uncle Moves to Iowa</h3>
                <p>Uncle moves to Iowa and settles in Linn County, Iowa. </p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->

        <div class="timeline-event">
            <div class="timeline-content">
            <div class="timeline-date">
                <time datetime="1858-01-01">1858</time>
            </div>
                <h3>Uncle Becomes Mayor</h3>
                <p>Uncle becomes Mayor in some city.</p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->

    </div> <!-- End 1858 timeline-group -->

 <div class="timeline-year" aria-hidden="true">END</div>

</section> <!-- End timeline section-->

How can i change this to eliminate the use of pseudo E::before and calc() in the css with an alternative CSS method (no javascript allowed either) but still have it look the same? My code was based on original by https://codepen.io/melnik909/pen/qPjwvq Skin #3