Vue 2.0 Hello World

by nachocab

HTML

<div class="wrapper">
    <div class="left">Left hello</div>
    <img class="right" src="http://placehold.it/70x50">
</div>

<div class=" wrapper2">
  <h2 class="header">
  Hello from header 2
  </h2>
  <div class="wrapper">
    <div class="left">Left hello</div>
    <img class="right" src="http://placehold.it/70x50">
  </div>
</div>

<div class="wrapper2">
  <h2 class="header">
  Hello from header 3
  </h2>
  <div class="wrapper" style="width: auto">
    <div class="left">Left hello</div>
    <img class="right" src="http://placehold.it/70x50">
  </div>
</div>

CSS

.wrapper {
  display: flex;
  width: 100%; // THIS IS CRUCIAL
  height: 100px;
  margin: 20px;
  background: limegreen;
  justify-content: space-between;
  align-items: center;
}

.wrapper2 {
  display: flex;
  height: 100px;
  margin: 20px;

  flex-direction: column;
  background: salmon;
    justify-content: space-between;
    align-items: center;
}

.left {
  margin: 0 auto;
}