Flex Tiles

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.flexParent {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-color: rgba(0,0,0,0.1);
}

templates.application.hbs

<h1>Flex</h1>
<br>
<br>
<div class="flexParent">
  <div style="display: flex; padding: 10px; background-color: red;">
    <div style="flex: 1; background-color: blue;">
      {{my-component}}
    </div>
    <div style=" width: 2px; background-color: black; display: flex;">
    	<div style="height: 5px; position:absolute; top: 0; margin-top: 52px;  width: calc(30% - 60px); margin-left: calc(-15% + 30px); z-index: 2; background-color: gray; border-radius: 2px;"></div>
    </div>
    <div style="flex: 1; background-color: green;">
      {{my-component long=true}}
    </div>
    <div style=" width: 2px; background-color: black;">
           	<div style="height: 5px; position:absolute; top: 0; margin-top: 52px;  width: calc(30% - 60px); margin-left: calc(-15% + 30px); z-index: 2; background-color: gray; border-radius: 2px;"></div>
    </div>
    <div style="flex: 1; background-color: yellow;">
      {{my-component}}
    </div>
    
  </div>
</div>
<br>
<br>

templates.components.my-component.hbs

<div style="display: flex; flex-direction: column; height: 100%;">
  <div style="display: flex; align-items: center; justify-content: center; padding: 20px;">
  	<div style="border-radius: 50%; width: 50px; height: 50px; background-color: white">
    </div>
  </div>
  <div style="text-align: center; padding: 10px; flex: 1;">
    {{#if long}}
    
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat ex vitae nulla placerat accumsan. Vivamus vel aliquam lectus, id posuere dolor
    {{/if}}
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat ex vitae nulla placerat accumsan. Vivamus vel aliquam lectus, id posuere dolor
  </div>
  <div style="text-align: center; padding: 10px; margin-bottom: 10px;">
    <button> Click me</button>
  </div>
</div>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}