Подсказка по правому краю

https://jsfiddle.net/mL19ybnt/15/

.right-align {
  position: absolute;
  right: 25px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel = "stylesheet"/>


<div class = "row">
  <div class = "input-field col s6">
    <input placeholder = "Placeholder" id = "first_name" type = "text" class = "validate">
    <label for = "first_name">First Name <span class = "right-align">Top Right</span></label>
  </div>
  
  <div class = "input-field col s3">
    <input placeholder = "Placeholder" id = "first_name" type = "text" class = "validate">
    <label for = "first_name">First Name <span class = "right-align">Top Right</span></label>
  </div>
</div>

вы можете использовать position: absolute;, а затем добавить поля, чтобы правильно выровнять его например

.right-align {
  position: absolute;
  right: 25px;
}

Вы можете уменьшить ширину метки до 91%, так как вы используете абсолютное положение (вверху, слева), чтобы отрегулировать его местоположение и добавить поплавок прямо к диапазону

input[type=text].validate+label {
  width: 91%;
}

.right-align {
  float: right;
}

Вы можете просто добавить абсолютную позицию к классу и назначить этот класс элементу, который вы хотите выровнять по правому краю ввода. Больше ничего настраивать не нужно. .right-align { position: absolute; }

Когда я проверяю его с помощью Chrome, происходит много сумасшедшего CSS. Откуда у вас этот CSS? По какой-то причине ваш ярлык расположен на 10,5 пикселей вправо, что сбивает его с толку. Попробуйте этот CSS ...

.right-align {
  float: right;
}
label {
  left: 0 !important;
  right: 0 !important;
}
.input-field{
  padding: 0 !important;
}

Обновлено: теперь я вижу, что вы получили это от Materialize. Я не очень знаком с этим, но метка, расположенная на 10,5 пикселей вправо, а .input-field и padding-leftpadding-right заставляют диапазон смотреть слишком далеко вправо по сравнению с вводом. Вам нужно удалить эту прокладку и убедиться, что этикетка расположена с left: 0. Возможно, было бы лучше создать собственные классы для вашей метки и для диапазона в метке, но концепции, которые я здесь показал, будут работать.

Я действительно не сторонник чрезмерного использования position: absolute для решения проблем. Использование этого может вызвать проблемы с производительностью, потому что браузер должен создать новый элемент стека и отрендерить наизнанку. Тем более, что он уже в абсолютном выражении, так что теперь у вас будет 3 элемента стека, когда это действительно нужно, никто не нужен.

Меньше грязи (нет позиции, худший вариант) Исправить:

.abcd {
  float: right;
}
label {
  padding-right: 1.50rem;
}

https://jsfiddle.net/f4036zmg/

Почему это работает: метка позиционируется абсолютно, поэтому не учитывается заполнение ее контейнерного элемента (.75rem). Чтобы правильно выровнять левую сторону, у нее есть left: .75rem, что означает, что правая теперь 1.5rem справа, потому что это width: 100%. Простое заполнение метки заставит поплавок перемещаться в области, заполненной метками.

Дайте мне знать, если вы хотите, чтобы все работало без позиций, это довольно просто. (Однако похоже, что materialize.min.css делает работу за вас очень уродливым образом).

Полуочистка (без позиции, вариант ОК) Исправить:

.abcd {
  float: right;
}
input[type=text].validate+label {
  width: auto;
  right: .75rem;
}

Здесь мы переопределяем materialize.min.css (возможно, это не лучший вариант, я не знаю). Мы перезагружаем width: auto, чтобы right работал, и, как и раньше, мы должны подкладывать этот .75rem.

https://jsfiddle.net/gL7fhx2q/

Чистое исправление:

Требуются изменения HTML:

<label for = "first_name">
  <span class = "">First Name</span>
  <span class = "tar">Top Right</span>
</label>

CSS:

.input-field.col label {
  left: 0;
  padding: 0 .75rem;
  display: flex;
}
.input-field.col label > span {
  flex: 1 0 auto;
}
.tar {
  text-align: right;
}

https://jsfiddle.net/7bw2zghr/

Повторное переопределение файла materialize.min.css, однако, не должно вызывать проблем для других проектов. Верните левую часть обратно в правильное положение left:0 и добавьте отступ, как входной padding: 0 .75rem. Теперь метка правильно соответствует его братьям и сестрам. Измените отображение метки на гибкий контейнер и оберните оба текста, чтобы они были гибкими элементами. Настройте элементы на пропорциональный рост, а затем правильно установите текст гибкого элемента вправо.