Изменить размер текста, когда он обрезан

У меня есть веб-страница с двумя div, которые содержат текст бок о бок. Я хочу, чтобы размер текста оставался одним и тем же для каждого, пока ширина экрана не отключит текст, который в этот момент я хотел бы, чтобы "ширина" div, содержащего 2 текста, была на 100% от размера экрана. Это так, что мой сайт выглядит одинаково на рабочем столе, но при просмотре на мобильном телефоне, если ширина экрана достаточно мала, чтобы текст был отключен, текст затем масштабируется, чтобы получить ширину экрана.

Вот мой текущий html для этой части:

<div id="fullname">
            <div class="firstname">First</div><div class="lastname">Second</div>
</div>

Наряду с текущим css:

.firstname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
    width: .5em;
}

.lastname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
}

#fullname
{
    max-width: 100%;
    margin: 50px 10px 0;
    white-space: nowrap;
}