css

Можно вычислить высоту относительно ширины вьюпорта.

width: 50vw;

height: calc(50vw / 1.5);

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

width: 50vw;

height: calc(50vw / 1.5);

Это не то.

Что будет если изменить размер родительского контейнера?

Или так:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        какой-то текст
    </div>
</div>
<style>
#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 66.6%; 
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}
  </style>