Top align text with fixed image next to it?

Question

I have a fixed image on my page that is always vertically centered. Next to it is a scrollable wall of text that I always want to be vertically top-aligned with the top of the fixed image when the page loads. As shown here (red bar is how it is top algined):

Right now as shown in the snippet, I have the right-div with padding-top: 60px which works for my computer screen. But the second I switch to an phone or tablet this no longer works.

How can I make it so when the page loads, the top of the text is always aligned with the top of the image?

.left-div {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 60%
}

.left-div>img {
  height: 100%;
}

.right-div {
  margin-left: 250px;
  padding-right: 10px;
  padding-top: 60px;
}

<div class="left-div">
  <img src="https://cdn1.iconfinder.com/data/icons/apple-products-icons/100/apple-outlined_iphone_6-2-512.png">
</div>
<div class="right-div">
  <p>
    I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
  </p>
  <p>
    Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering
    injustice. It came as a joyous daybreak to end the long night of captivity.
  </p>
  <p>
    But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. One hundred years later, the Negro lives on a lonely island
    of poverty in the midst of a vast ocean of material prosperity. One hundred years later, the Negro is still languished in the corners of American society and finds himself in exile in his own land. So we have come here today to dramatize an shameful
    condition.
  </p>
  <p>
    In a sense we've come to our nation's Capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to
    fall heir.
  </p>
  <p>
    This note was a promise that all men, yes, black men as well as white men, would be guaranteed the unalienable rights of life, liberty, and the pursuit of happiness.
  </p>
</div>

Answer 1

The height of the image on the left is 60% of the height of the window. So you should just add a 20% padding-top for the right div

.right-div {
  padding-top: 20vh;
}

Here is a sample

EDIT

If you want to set image height in pixels (or any other units), you can use the CSS calc() function to calculate the padding

.left-div {
  height: 125px;
}

.right-div {
  padding-top: calc((100vh - 125px) / 2);
}