New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  header: 'This is a really long header that might occur at some point in the future you just never know',
  body: 'This is a really long body with a lot of content I hope you enjoy reading it. This is a really long body with a lot of content I hope you enjoy reading it. ',
  footer: 'This is a small footer',
});

templates.application.hbs

<style>
  /*
  	Defines the dimensions of the notification container
  */
  .inapp-alert-body {
  	border: 1px solid red;
    min-height: 100px;
    width: 400px;
  }
  
  /*
   Current: Uses absolute positioning for all 3 body elements.
   Problem: Overlap, does not allow container to grow.
  */
  .current.inapp-alert-body {
  	position: relative;
  }
  .current .body-element {
  	position: absolute;
  }
  .current .inapp-alert-title{
  	top: 0;
  }
  .current .inapp-alert-content{
  	transform: translateY(-50%);
 		top: 50%;
  }
  .current .inapp-alert-following{
  	bottom: 0;
  }
  
  /*
   Suggested: use flex box and allow container to grow if necessary
  */
  /** 3 column layout first **/
  .suggested.inapp-alert-body {
  	display: flex;
  }
  .suggested>.content {
  	flex: 4; /* make content 4x bigger than icon and image column */
  }
  .suggested>.icon, .suggested>.image {
    /** center the elements vertically **/
  	display: flex;
    align-items: center;
    flex: 1;
  }
  .suggested>.icon {
  	order: -1; /* move icon to front */
  	background: red;
  }
  .suggested>.image {
  	background: yellow;
  }
  
  /** reset (not needed) **/
  h4, figure {
    padding: 0;
    margin: 0;
  }
</style>

<h1>Current</h1>
<p class="inapp-alert-body current">
  <span class="body-element inapp-alert-title t-14 t-bold t-black">
        {{header}}
      </span>
      <span class="body-element inapp-alert-content t-12 t-black">
        {{body}}
      </span>
      <span class="body-element inapp-alert-following t-12 t-black--light">
        {{footer}}
      </span>
</p>

<h1>Suggested</h1>
<section class="inapp-alert-body suggested">
  <div class="content">
    <h4 class="inapp-alert-title">
      {{header}}
    </h4>
    <p class="inapp-alert-content t-12 t-black">
      {{body}}
    </p>
    <footer class="inapp-alert-following t-12 t-black--light">
      {{footer}}
    </footer>
  </div>
  <div class="icon">
  	<img src="https://avatars3.githubusercontent.com/u/1444384?v=4&s=32" />
  </div>
  <figure class="image">
  	<img src="https://avatars3.githubusercontent.com/u/1444384?v=4&s=32" />
  </figure>
</section>

<h3>Pros</h3>
<ul>
	<li>Allows long text content and will resize automatically</li>
  <li>Prioritizes content over image and icon in the source order. Screen readers will encounter the text content first.</li>
</ul>

twiddle.json

{
  "version": "0.15.1",
  "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.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}