Ну если знаем класс и стили его, которые хотим использовать, то зачем получать сами стили, вместо использования его класса?

Потому что структура и элементы отличаются.
Допустим у этого input стиль прописан по правилу:
input.from-control
или вообще
#inp1
В таком случаи к допустим button ты его не применишь.

Ну еще и правила не правила подходят/нужны так? Так что тогда искусственный интеллект нужен или все-таки перед использованием нужен визуальный анализ?

Потомучто например:
1. это может быть не бутстрап
2. это может быть и бутстрап но класс не прописан
3. это может быть свой класс.
4. это могут быть 15 (условно) классов, какой из них брать?
5. вы предлагаете класс единичного инпута применить к div внутри которого input и button?
- А вы уверены, что .form-control{display:flex;} например?

И на самом деле - еще вагон и маленькая тележка вопросов, неизбежно возникающих в этом случае.
Такчто мы не знаем класс

Вот визуально как-раз и проанализировано уже, и по-этому вопрос и появился.
Вы смотрите на вопрос только с точки зрения js профи, не глядя на внешний вид результата.
Я наоборот, обращаюсь к js профи, чтобы понять как прийти к нужному визуальному результату.

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

Но, не забывайте, что:
1. div-то в документе и фоном документа может быть все, что угодно.
2. у эталонного дива может быть background:none; соответственно и диву и инпуту и кнопке надо такой же бэкграунд (пока не страшно).
3. а давайте теперь диву и инпуту из пункта 2 выставим ширину 100 пикселей, и в инпут закопипастим пару параграфов Лоремов. Станет страшно.

И это просто пример на вскидку. Даже сильно не выдумывая и глубоко не копая.

Я не понимаю душевных терзаний, ибо если бы JS за вас думал, догадывался чего вы хотите, искал, подбирал, выбраковывал лишнее, тогда понятно. В противном случае не понятно к чему все это.

Ответ истинного Профессионала. Браво. Спасибо.

Я в курсе, что я дебил, но я пытаюсь учиться. И спрашиваю чтобы понять и научиться, а не для того, чтобы потрясти воздух "душевными терзаниями".
И именно потому, что: "JS за вас думал, догадывался чего вы хотите, искал, подбирал, выбраковывал лишнее", - до сих пор не случилось, предлагаемое Вами клонирование не проходит, а про display:flex - это всего-лишь "посмотреть на полшага вперед", именно про тот визуальный анализ, которым Вы же и козырнули.

Я ведь не называл никого дебилом. Но, если учесть, что JS конечно же не может догадаться чего от него хотят, а значит придется все селекторы, правила, условия описывать, то это уже не хилая работа будет. Зачем же тратить на это время вместо того чтобы явно прописать необходимые стили, вот это не понятно.

Да не вопрос. Можно прописать свои селекторы.
Но опять же с точки зрения визуального анализа:
1. если это уже прописано - берем написанное.
2. если не прописано - берем свое.
3. я и не хочу обходить и описывать ВСЕ селекторы, я хочу посмотреть на 1 элемент с известным id (я не в курсе механизмов какими JS добирается до стилей этого элемента, вполне возможно, что он обходит все селекторы, которые есть, а не только селекторы этого элемента)
Потому и спросил изначально.
Решение предложенное Skipp - вполне себе нормальное решение, если бы не политика безопасности.

Как по уму - в отладчике браузера выбираем элемент, смотрим правила, копируем и вставляем себе.

На JS - сначала смотрим правила, затем пишем что-то для JS и нагружаем его, боремся попутно с проблемами возможными, ковыряемся в стилях в поиске, затем применяем.

Я может быть не понимаю, может быть в этом есть какой-то скрытый глубокий смысл, но я не вижу вообще в этом никакого смысла. Ну коли охота, то она же пуще неволи.