cssの要素を右側に配置したい！

Question

.form{
          height: 90px;
          padding: 20px 40px;
          background-color: #ddd;
          .message{
            display: flex;
            .message-box{
              position: relative;
              width: 945px;
              &__text{
                height: 50px;
                width: 100%;
                padding: 0 40px 0 10px;
                color: #434a54;
                border-style: none;
              }
              &__image{
                font-size: 1.3rem;
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                .fa{
                  display: inline-block;
                  font: normal normal normal 14px/1 FontAwesome;
                  font-size: inherit;
                  text-rendering: auto;
                  -webkit-font-smoothing: antialiased;
                }
                .hidden{
                  display: none;
                }
              }
            }
            .submit{
              width: 100px;
              height: 50px;
              padding: 0 30px;
              margin-left: 15px;
              background-color: #38aef0;
              color: white;
              cursor: pointer;
              float: right;
            }
          }
        }

ここからhaml
form
        .message
          = form_for [@group,@message] do |f|
            .message-box
              = f.text_field :content, class: 'message-box__text', placeholder: 'type a message'
              = f.label :image, class: 'message-box__image' do
                = fa_icon 'picture-o', class: 'fa'
                = f.file_field :image, class: 'hidden'
              = f.submit 'Send', class: 'submit'
コード

ecc279173e5652a904265ef9ac82c5.png)

sendボタンをメッセージの右側に配置して１５px開けたいのですがのですがうまくいきません。
知識が浅いのでご教授ください、。よろしくお願いします。

Comments

[退会済みユーザー]

こんにちは
HTMLのコードも追記していただけますでしょうか

Answer 1

「message-box__textとsubmitの2つを1行に入れようと思うと、はみ出る」のが今の状況かと思います。なので、例えば以下のようにwidthを小さめに設定してあげるといかがでしょうか？

.message-box__text{
  width: 60%;
}
.submit{
 width: 20%
}