xenonhammer

Ну можно оба текста завернуть в тег <p></p>. Но это не совсем удобно, потому что придут отступы, которые по дефолту и нужно будет для них писать стили чтобы ушли. По этой причине оборачивают не в p, а spanсо width: 100%, либо просто вdiv, так как он по умолчанию имеет display: block, который занимает всю ширину родителя.я

Нет никаких отступов, это картинки такие

это коротка запись,
здесь объединяются три свойства

flex-grow: 0
flex-shrink: 1
flex-basis: 33.33%

нужно обращаться не к svg, а к его path - у него есть fill - заливка и stroke - обводка
svg path:hover {
display: block;
stroke: #000
}

Переместить меню на самый верх и сделать position:fix. JS нужно, чтобы решать всевозможные задачи (подобного рода тоже), не стоит им пренебрегать

Самый простой способ это как уже было сказано, flexBox order или grid' ы. Для этого делаете обертку, т.е. создаете див и туда кладете параграф и кнопку. И вешаете на обертку флексы или гриды. И используя медиа запросы меняете значения. Медиа запросы как раз и нужны, для того чтобы меня классы

тут дело не css, а в javascript. css такие задачи не решает.

document.querySelector("нужный тэг").addEventListener(
    'click', () = > { 
document.querySelector("нужный тэг").style.textDecoration = "underline"
 })

Это как пример