Convert pass phrase entry to flexbox

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -29,9 +29,13 @@ limitations under the License.
     display: block;
 }
 
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+    display: flex;
+    align-items: start;
+}
+
 .mx_CreateKeyBackupDialog_passPhraseHelp {
-    float: right;
-    width: 230px;
+    flex: 1;
     height: 85px;
     margin-left: 20px;
     font-size: 80%;
@@ -42,14 +46,16 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_passPhraseInput {
+    flex: none;
     width: 250px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;
+    margin-bottom: 1em;
 }
 
 .mx_CreateKeyBackupDialog_passPhraseMatch {
-    float: right;
+    margin-left: 20px;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKeyHeader {
@@ -61,11 +67,11 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_recoveryKey {
-    width: 275px;
+    width: 262px;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 8px;
+    margin-right: 12px;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKeyButtons {

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -239,10 +239,7 @@ export default React.createClass({
             <p>{_t("You'll need it if you log out or lose access to this device.")}</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
-                    {strengthMeter}
-                    {helpText}
-                </div>
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
                     <input type="password"
                         onChange={this._onPassPhraseChange}
                         onKeyPress={this._onPassPhraseKeyPress}
@@ -250,6 +247,11 @@ export default React.createClass({
                         className="mx_CreateKeyBackupDialog_passPhraseInput"
                         placeholder={_t("Enter a passphrase...")}
                     />
+                    <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
+                        {strengthMeter}
+                        {helpText}
+                    </div>
+                </div>
             </div>
 
             <DialogButtons primaryButton={_t('Next')}
@@ -317,7 +319,7 @@ export default React.createClass({
                 "somewhere safe.",
             )}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                {passPhraseMatch}
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
                     <div>
                         <input type="password"
                             onChange={this._onPassPhraseConfirmChange}
@@ -328,6 +330,8 @@ export default React.createClass({
                             autoFocus={true}
                         />
                     </div>
+                    {passPhraseMatch}
+                </div>
             </div>
             <DialogButtons primaryButton={_t('Next')}
                 onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}