--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -216,17 +216,16 @@ skip-if = os != 'mac' # The tested ctrl+
 [browser_jsterm_helper_help.js]
 [browser_jsterm_helper_keys_values.js]
 [browser_jsterm_helper_pprint.js]
 [browser_jsterm_hide_when_devtools_chrome_enabled_false.js]
 [browser_jsterm_history.js]
 [browser_jsterm_history_arrow_keys.js]
 [browser_jsterm_history_nav.js]
 [browser_jsterm_history_persist.js]
-[browser_jsterm_input_expansion.js]
 [browser_jsterm_inspect.js]
 [browser_jsterm_instance_of.js]
 [browser_jsterm_multiline.js]
 [browser_jsterm_no_autocompletion_on_defined_variables.js]
 [browser_jsterm_no_input_and_tab_key_pressed.js]
 [browser_jsterm_null_undefined.js]
 [browser_jsterm_popup_close_on_tab_switch.js]
 [browser_jsterm_screenshot_command_clipboard.js]
@@ -289,23 +288,23 @@ skip-if = true #	Bug 1404382
 [browser_webconsole_filter_scroll.js]
 [browser_webconsole_filters.js]
 [browser_webconsole_filters_persist.js]
 [browser_webconsole_highlighter_console_helper.js]
 [browser_webconsole_hpkp_invalid-headers.js]
 [browser_webconsole_hsts_invalid-headers.js]
 [browser_webconsole_iframe_wrong_hud.js]
 [browser_webconsole_ineffective_iframe_sandbox_warning.js]
+[browser_webconsole_in_line_layout.js]
 [browser_webconsole_init.js]
 [browser_webconsole_input_field_focus_on_panel_select.js]
 [browser_webconsole_input_focus.js]
 [browser_webconsole_insecure_passwords_about_blank_web_console_warning.js]
 [browser_webconsole_insecure_passwords_web_console_warning.js]
 [browser_webconsole_inspect_cross_domain_object.js]
-[browser_webconsole_js_input_expansion.js]
 [browser_webconsole_keyboard_accessibility.js]
 [browser_webconsole_location_debugger_link.js]
 [browser_webconsole_location_scratchpad_link.js]
 [browser_webconsole_location_styleeditor_link.js]
 [browser_webconsole_logErrorInPage.js]
 [browser_webconsole_loglimit.js]
 [browser_webconsole_logWarningInPage.js]
 [browser_webconsole_longstring.js]

deleted file mode 100644
--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_input_expansion.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Check that the jsterm input supports multiline values. See Bug 588967.
-
-const TEST_URI = "data:text/html;charset=utf-8,Test for jsterm multine input";
-
-add_task(async function() {
-  // Run test with legacy JsTerm
-  await pushPref("devtools.webconsole.jsterm.codeMirror", false);
-  await performTests();
-  // And then run it with the CodeMirror-powered one.
-  await pushPref("devtools.webconsole.jsterm.codeMirror", true);
-  await performTests();
-});
-
-async function performTests() {
-  const {jsterm, ui} = await openNewTabAndConsole(TEST_URI);
-  const inputContainer = ui.window.document.querySelector(".jsterm-input-container");
-
-  const ordinaryHeight = inputContainer.clientHeight;
-
-  // Set a multiline value
-  jsterm.setInputValue("hello\nworld\n");
-  ok(inputContainer.clientHeight > ordinaryHeight, "the input expanded");
-
-  info("Erase the value and test if the inputNode shrinks again");
-  jsterm.setInputValue("");
-  is(inputContainer.clientHeight, ordinaryHeight, "the input's height is normal again");
-}

new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_in_line_layout.js
@@ -0,0 +1,128 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the in-line layout works as expected
+
+const TEST_URI = "data:text/html,<meta charset=utf8>Test in-line console layout";
+
+const MINIMUM_MESSAGE_HEIGHT = 19;
+
+add_task(async function() {
+  // Run test with legacy JsTerm
+  await pushPref("devtools.webconsole.jsterm.codeMirror", false);
+  await performTests();
+  // And then run it with the CodeMirror-powered one.
+  await pushPref("devtools.webconsole.jsterm.codeMirror", true);
+  await performTests();
+});
+
+async function performTests() {
+  // The style is only enabled in the new jsterm.
+  await pushPref("devtools.webconsole.jsterm.codeMirror", true);
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const {jsterm, ui} = hud;
+  const {document} = ui;
+  const wrapper = document.querySelector(".webconsole-output-wrapper");
+  const [
+    filterBarNode,
+    outputNode,
+    ,
+    inputNode,
+  ] = wrapper.querySelector(".webconsole-flex-wrapper").childNodes;
+
+  testWrapperLayout(wrapper);
+
+  is(outputNode.offsetHeight, 0, "output node has no height");
+  is(filterBarNode.offsetHeight + inputNode.offsetHeight, wrapper.offsetHeight,
+    "The entire height is taken by filter bar and input");
+
+  await setFilterBarVisible(hud, true);
+  testWrapperLayout(wrapper);
+  is(filterBarNode.offsetHeight + inputNode.offsetHeight, wrapper.offsetHeight,
+    "The entire height is still taken by filter bar and input");
+
+  info("Logging a message in the content window");
+  const onLogMessage = waitForMessage(hud, "simple text message");
+  ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
+    content.wrappedJSObject.console.log("simple text message");
+  });
+  const logMessage = await onLogMessage;
+  testWrapperLayout(wrapper);
+  is(outputNode.clientHeight, logMessage.node.clientHeight,
+    "Output node is only the height of the message it contains");
+
+  info("Logging multiple messages to make the output overflow");
+  const onLastMessage = waitForMessage(hud, "message-100");
+  ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
+    for (let i = 1; i <= 100; i++) {
+      content.wrappedJSObject.console.log("message-" + i);
+    }
+  });
+  await onLastMessage;
+  ok(outputNode.scrollHeight > outputNode.clientHeight, "Output node overflows");
+  testWrapperLayout(wrapper);
+
+  info("Make sure setting a tall value in the input does not break the layout");
+  jsterm.setInputValue("multiline\n".repeat(200));
+  is(outputNode.clientHeight, MINIMUM_MESSAGE_HEIGHT,
+    "One message is still visible in the output node");
+  testWrapperLayout(wrapper);
+
+  info("Hide secondary filter bar");
+  await setFilterBarVisible(hud, false);
+  is(outputNode.clientHeight, MINIMUM_MESSAGE_HEIGHT,
+    "One message is still visible in the output node");
+  testWrapperLayout(wrapper);
+
+  const filterBarHeight = filterBarNode.clientHeight;
+
+  info("Show the hidden messages label");
+  const onHiddenMessagesLabelVisible = waitFor(() =>
+    document.querySelector(".webconsole-filterbar-filtered-messages"));
+  ui.filterBox.focus();
+  ui.filterBox.select();
+  EventUtils.sendString("message-");
+  await onHiddenMessagesLabelVisible;
+
+  info("Shrink the window so the label is on its own line");
+  const toolbox = hud.ui.consoleOutput.toolbox;
+  const hostWindow = toolbox.win.parent;
+  hostWindow.resizeTo(300, window.screen.availHeight);
+
+  ok(filterBarNode.clientHeight > filterBarHeight, "The filter bar is taller");
+  testWrapperLayout(wrapper);
+
+  info("Show filter bar");
+  await setFilterBarVisible(hud, true);
+  testWrapperLayout(wrapper);
+
+  info("Hide filter bar");
+  await setFilterBarVisible(hud, false);
+
+  info("Expand the window so hidden label isn't on its own line anymore");
+  hostWindow.resizeTo(window.screen.availWidth, window.screen.availHeight);
+  testWrapperLayout(wrapper);
+
+  jsterm.setInputValue("");
+  testWrapperLayout(wrapper);
+
+  ui.clearOutput();
+  testWrapperLayout(wrapper);
+  is(outputNode.offsetHeight, 0, "output node has no height");
+  is(filterBarNode.offsetHeight + inputNode.offsetHeight, wrapper.offsetHeight,
+    "The entire height is taken by filter bar and input");
+}
+
+function testWrapperLayout(wrapper) {
+  is(wrapper.offsetHeight, wrapper.scrollHeight, "there's no scrollbar on the wrapper");
+  ok(wrapper.offsetHeight <= wrapper.ownerDocument.body.offsetHeight,
+    "console is not taller than document body");
+  const childSumHeight = [...wrapper.childNodes].reduce(
+    (height, node) => height + node.offsetHeight, 0);
+  ok(wrapper.offsetHeight >= childSumHeight,
+    "the sum of the height of wrapper child nodes is not taller than wrapper's one");
+}

deleted file mode 100644
--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_js_input_expansion.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// Tests that the input box expands as the user types long lines.
-
-"use strict";
-
-const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
-                 "test/mochitest/test-console.html";
-
-add_task(async function() {
-  const { jsterm, ui } = await openNewTabAndConsole(TEST_URI);
-  ui.clearOutput();
-
-  const { inputNode } = jsterm;
-  const getInputHeight = () => inputNode.clientHeight;
-
-  info("Get the initial (empty) height of the input");
-  const emptyHeight = getInputHeight();
-
-  info("Set some multiline text in the input");
-  jsterm.setInputValue("hello\nworld\n");
-
-  info("Get the new height of the input");
-  const multiLineHeight = getInputHeight();
-
-  ok(emptyHeight < multiLineHeight,
-     `Height changed from ${emptyHeight} to ${multiLineHeight}`);
-
-  info("Add some new, longer, multiline text");
-  jsterm.setInputValue("row1\nrow2\nrow3\nrow4\nrow5\nrow6\nrow7\nrow8\nrow9\nrow10\n");
-
-  info("Get the new height of the input");
-  const longerHeight = getInputHeight();
-
-  ok(multiLineHeight < longerHeight,
-     `Height changed from ${multiLineHeight} to ${longerHeight}`);
-
-  info("Test that the inputNode shrinks again");
-  jsterm.setInputValue("");
-
-  const backToEmptyHeight = getInputHeight();
-  const diff = Math.abs(backToEmptyHeight - emptyHeight);
-  ok(diff <= 1, "The input shrank back to its original size (within 1px)");
-});