Generated by SassMeister.com.

SassMeister-input-HTML.haml

.layout-container
  .input
  .edit
  .output

%br
  
.layout-container.input-open
  .input
  .edit
  .output

%br
  
.layout-container.output-open
  .input
  .edit
  .output

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

body {
  margin: 0;
  padding: 0;
}

.layout-container {
  display: flex;
}

.input-open {
  transform: translate(180px);
}

.output-open {
  transform: translate(-180px);
}

.input {
  height: 100px;
  background-color: green;
  width: 200px;
  margin-left: -180px;
}

.edit {
  height: 100px;
  background-color: red;
  flex-grow: 1;
}

.output {
  height: 100px;
  background-color: blue;
  width: 200px;
  margin-right: -180px;
}

SassMeister-output.css

body {
  margin: 0;
  padding: 0;
}

.layout-container {
  display: flex;
}

.input-open {
  transform: translate(180px);
}

.output-open {
  transform: translate(-180px);
}

.input {
  height: 100px;
  background-color: green;
  width: 200px;
  margin-left: -180px;
}

.edit {
  height: 100px;
  background-color: red;
  flex-grow: 1;
}

.output {
  height: 100px;
  background-color: blue;
  width: 200px;
  margin-right: -180px;
}

SassMeister-rendered.html

<div class='layout-container'>
  <div class='input'></div>
  <div class='edit'></div>
  <div class='output'></div>
</div>
<br>
<div class='layout-container input-open'>
  <div class='input'></div>
  <div class='edit'></div>
  <div class='output'></div>
</div>
<br>
<div class='layout-container output-open'>
  <div class='input'></div>
  <div class='edit'></div>
  <div class='output'></div>
</div>