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

Question

Я бы хотел переместить мою кнопку прямо вверх, чтобы она соответствовала кнопкам iOS и Android с помощью Bootstrap.

Моя попытка в приведенном ниже коде дает мне вывод, который представлен на скриншоте, но не тот, который я хочу

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

Что я делаю не так?

import React from 'react';

const footer = () => {
    return(
        <footer className="container">
            <div className="col-md-6 col-sm-12 center">
                <img className="iosBtn imgCenter img-responsive" src="https://website.com/images/website/Home/iphone.png?v=6.97"/>
                <img className="img-responsive" src="https://website.com/images/website/Home/google_play.png?v=6.97"/>
            </div>

            {/* I want to move this upward */}
            <form className="form-inline float-right">
                <div className="form-group mx-sm-3 mb-2">
                    <input className="form-control" placeholder="Enter Email"/>
                </div>
                <button type="submit" className="btn btn-primary mb-2">Submit</button>
            </form>

            <hr/>

            <div className="row text-center">
            <div className="col-sm">
            <a href="#">WINNERS</a>
            </div>
            <div className="col-sm">
            <a href="#">BLOG</a>
            </div>
            <div className="col-sm">
            <a href="#">FAQ</a>
            </div>
            <div className="col-sm">
            <a href="#">SWEEPSTAKES</a>
            </div>
            <div className="col-sm">
            <a href="#">CONTACT US</a>
            </div>
            <div className="col-sm">
            <a href="#">TERMS</a>
            </div>
            </div>

            <br/>

            <div className="text-center">
            <a href="#" className="btn btn-sm btn-link fa fa-facebook"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-instagram"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-youtube"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-twitter"></a>
            <p className="text-center">website</p>
            </div>
        </footer>
    );
};

export default footer;

Answer 1

Оберните ваши div изображениями и вашими form в одном div. И играть с display: inline-block и float: left на двух. Если ничего не работает, попробуйте обернуть form также другим div и получить inline-block там.

См. пример кода

Answer 2

Судя по вашему html, к форме применен стиль float: right;, который вызывает странное поведение.

Я бы рекомендовал использовать flexbox вместо:

footer {
  display: flex;
  width: 100%;
}

form {
  display: flex;
  align-items: center;
  margin-left: auto;
}

<footer>
  <div>
    <img src="https://via.placeholder.com/140x100">
    <img src="https://via.placeholder.com/140x100">
  </div>
  <form>
    <input type="text">
    <input type="submit" value="submit">
  </form>
</footer>