xenonhammer

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

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

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

Разницы нет, главное, чтобы он был в head. Обычно делаю так же как вы

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

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

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