hzzzzl

я почему-то думаю, что лучше всего текст в таблицу положить, ну и две колонки левая и правая

так себе решение, но

body {
  overflow-y: scroll;
}

а как иначе? скроллбар же будет появляться, то есть размер body будет уменьшаться

как вариант, выводить этот текст в блоке с position:absolute при наведении, как например делает википедия при наведении на ссылки, но это не то

import { Redirect } from "react-router-dom"

......

state = { shouldRedirect: false, error: null }

onSubmit = () => {
  const response = /* ..... true | false */ 
  this.setState({ 
    shouldRedirect: response,
    error: response ? null : 'Something wrong!'
  })
}

render() {
  if (this.state.shouldRedirect) return <Redirect to="/" />

  return (
    { this.state.error && <div className="error">{this.state.error}</div> }
    .......
  )
}

инпут очищается, просто лейбл отдельно меняется при выборе файла, а при очистке инпута лейбл не чистишь

если убрать все стилизации и оставить только этот JS, то видно что всё работает

document.querySelector('.remove').addEventListener('click', function() {
  document.querySelector('input[type=file]').value = '';
}, false);

https://bennettfeely.com/clippy/

как-то так?

норм у тебя пример ^^
да там ничего не делится, тупо 25% на ширину блока

по добавлению к "card" какого-нибудь data атрибута

наверно проще это обернуть какой-нибудь функцией, которая будет и добавлять дата-атрибут, и заодно добавлять стили для элементов.. что-то типа

function addRandomColor(card) {
  rgb = `(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
  card.style = `border-color: rgb${rgb};`
  // тут найти card-header принадлежащий этой карточке
  cardHeader.style = `background: rgb${rgb};`
}