diff --git a/src/player.jsx b/src/player.jsx
index e0fb33c..6cd9bcf 100644
--- a/src/player.jsx
+++ b/src/player.jsx
@@ -480,32 +480,26 @@ let ProgressBar = class extends React.Component {
         };
 
         return (
-            <div className="progress" onClick={this.jumpTo}>
+            <div id="progress_bar" className="progress" onClick={this.jumpTo}>
                 <div className="progress-bar" role="progressbar" style={progress} />
             </div>
         );
     }
 };
 
-let InputPlayer = class extends React.Component {
+class InputPlayer extends React.Component {
     render() {
+        const input = String(this.props.input).replace(/(?:\r\n|\r|\n)/g, " ");
+
         return (
-            <div id="input-player" className="panel panel-default">
-                <div className="panel-heading">
-                    <span>Input</span>
-                </div>
-                <div className="panel-body">
-                    <textarea name="input" id="input-textarea" cols="30" rows="10" value={this.props.input} readOnly disabled />
-                </div>
-            </div>
+            <textarea name="input" id="input-textarea" cols="30" rows="1" value={input} readOnly disabled />
         );
     }
-};
+}
 
 export class Player extends React.Component {
     constructor(props) {
         super(props);
-
         this.handleTimeout = this.handleTimeout.bind(this);
         this.handlePacket = this.handlePacket.bind(this);
         this.handleError = this.handleError.bind(this);
@@ -1042,9 +1036,6 @@ export class Player extends React.Component {
         // ensure react never reuses this div by keying it with the terminal widget
         return (
             <div id="recording-wrap">
-                <div id="input-player-wrap" className="col-md-3">
-                    <InputPlayer input={this.state.input} />
-                </div>
                 <div className="col-md-6 player-wrap">
                     <div ref="wrapper" className="panel panel-default">
                         <div className="panel-heading">
@@ -1109,6 +1100,9 @@ export class Player extends React.Component {
                                     mark={currentTsPost(this.state.currentTsPost, this.buf.pos)}
                                     fastForwardFunc={this.fastForwardToTS} />
                             </div>
+                            <div id="input-player-wrap">
+                                <InputPlayer input={this.state.input} />
+                            </div>
                         </div>
                         {error}
                     </div>
diff --git a/src/recordings.css b/src/recordings.css
index 80b7be5..a163f44 100644
--- a/src/recordings.css
+++ b/src/recordings.css
@@ -381,22 +381,19 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     height: 100%;
 }
 
-#input-textarea {
-    width: 100%;
-    heigth: 100%;
-    font-family: monospace;
-}
-
-#input-player-wrap {
-    height: 100%;
-}
-
 .logs-view-log-time {
     display: inline-block;
     width: 150px;
     vertical-align: middle;
 }
 
-#input-player textarea{
+#input-textarea {
+    width: 100%;
+    heigth: 100%;
+    font-family: monospace;
     resize: none;
 }
+
+#progress_bar {
+    margin-bottom: 10px;
+}