как подвинуть объект css?

Question

Не двигается input text от радиокнопок

.choice {
    display: flex;
    align-items: center;
}

.multiplechoice {
    position: static;
}

input[type=radio] {
    right: 0;
    margin-left: var(--margin-left-right);
    margin-right: var(--margin-left-right);
    cursor: pointer;
    height: 16px;
    width: 16px;
}

input[type=radio]::before {
    content: '';
    position: absolute;
    background-color: var(--color-light-apricot);
    border: 2px solid var(--color-blue);
}

input[type=radio]:checked::after {
    content: '';
    position: absolute;
    background-color: var(--color-blue);
    visibility: visible;
}

label {
    font-size: var(--font-size-label);
}

.scores {
    margin-left: var(--margin-left-right);
    margin-right: var(--margin-left-right);
}

<div className={s.choice}>
    <div className={s.multiplechoice}>
    <label>
        <input name="radiobutton" type="radio" value="radiobutton" />
        ...</label><br />
        <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
    </div>
    <input type="text" placeholder="Score" className={s.scores} />
</div>

Answer 1

может так?

input[type="text"] {
   padding: 10px 0;
   margin: 15px 0;
}

Answer 2

В сниппет вообще-то надо вставлять рабочий код, а не кусок с синтаксисом неизвестного фреймворка и с необъявленными переменными (поэтому ваши стиля не применяются к элементам в сниппете - классов нет, переменные неизвестны). А еще надо удалять то, что к вопросу не относится.
Вопрос надо формулировать так, чтобы было понятно, что вы хотите. Куда не двигается? Как не двигается? Я, например, глядя на заголовок вопроса, первым делом подумал об анимации.
Ну и, собственно, все прекрасно сдвигается - вычистил ваш код и добавил цвета для наглядности. Инпут на расстоянии от лейблов и радиокнопок. Если не то, обновите, пожалуйста вопрос, чтобы было понятно, что вам надо:

.choice {
  display: flex;
  align-items: center;
  background: pink;
}

.multiplechoice {
  position: static;
  background: yellow;
}

input[type=radio] {
  right: 0;
  margin-left: 1em;
  margin-right: 1em;
  cursor: pointer;
  height: 16px;
  width: 16px;
  background: green;
}

label {
  font-size: 14px;
  background: wheat;
}

.scores {
  margin-left: 5em;
  margin-right: 1em;
}

<div class="choice">
  <div class="multiplechoice">
    <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
    <br />
    <label><input name="radiobutton" type="radio" value="radiobutton" />...</label>
  </div>
  <input type="text" placeholder="Score" class="scores" />
</div>

БЛОГ НА HUSL

как подвинуть объект css?

Ответы (2 шт):