Есть ли способ заставить текст придерживаться div "border"?

Question

Я пытался найти способ получить эффект, аналогичный обычному «прилипанию к верхней части контейнера», но вместо вершины я стараюсь всегда придерживаться границы контейнера в том же месте, но я продолжаю получать текст, который просто продолжает двигаться, когда меняется разрешение: В более высоком разрешении оно остается в нужном месте, но когда разрешение уменьшается или достигает пути к высокому , текст начинает танцевать вокруг контейнера.
Чтобы уточнить, я использую стилевые компоненты для контейнера и inline-css для текста, я уже пробовал «отзывчивый» CSS с помощью screen.size, чтобы изменить marginTop при изменении размера экрана, но это не показалось эффективный или дружественный к браузеру, а также очень запутанный для чтения, так что я надеюсь, что есть лучший способ сделать это, извините, если этот вопрос кажется слишком глупым и / или уже получил ответ, я много искал об этом, но не нашел ничего, что соответствовало бы контексту и работало.

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1%;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title{
  margin-top: -1rem;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>

Answer 1

Ваше заполнение меняется, поэтому вы не можете его контролировать.Если вы действительно хотите иметь динамическое заполнение, вы должны установить его для одного и того же vale для каждого элемента, например 1vw, и для них необходимо рассчитать позицию .title, например calc (-12px - 1vw);

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1vw;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title {
    margin: 0;
    position: relative;
    top: calc(-12px - 1vw);
    font-family: "Helvetica";
    width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>

Answer 2

Абсолютное позиционирование

Примечание: "padding" на родительском элементе необходимо отрегулировать.

.fieldset {
  margin: 2em 1%;
  background: #00000000;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
  position: relative;
}

.title {
  margin: 0;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
  position: absolute'
 top:0;
  border: 1px solid red;
  transform: translateY(-50%);
}

<div class="fieldset">
  <h3 class="title">
    Title
  </h3>
  <p>a</p>
</div>