как изменить текст h1 с помощью кнопки ввода, не теряя кнопку

У меня есть тег h1 с кнопкой и некоторым текстом справа, который отображается только после действия пользователя во время выполнения с использованием CSS и jQuery. Когда кнопка отображается, я хочу поместить текст рядом с ней в h1.

Проблема в том, что когда я добавляю текст, я теряю кнопку.

HTML выглядит так...

<h1>
    <input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">
</h1>

CSS выглядит так...

.tabButtonHidden {
   visibility: hidden;
}

.tabButtonVisible {
   visibility:visible;
}


#newTabButton {
    background: rgba(216, 216, 216, 6);

}

h1 {
    font: 100% Arial, Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    font-weight:500;    
    background: rgba(218, 235, 245, 6);
    margin: 0px;
}

jQuery выглядит так...

if ($("#newTabButton").hasClass("tabButtonHidden")) {
   $('#newTabButton').removeClass("tabButtonHidden").addClass("tabButtonVisible");
}

$('h1').text('Now is the time for all good men...');

Последняя строка в jQuery пишет текст там, где обычно кнопка быть. Если я удалю эту последнюю строку, изменю html, чтобы включить текст следующим образом, jquery работает отлично, за исключением, конечно, того, что текст статичен и всегда виден...

<h1>
    <input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">Now is the time for all good men...
</h1>

Что я упустил? Мне нужно изменить текст и сделать его и кнопку видимой все динамически.

Спасибо за любую помощь.