JSFiddle - React, Tailwind, and code Playground

by Louis Barranqueiro

HTML

<body>
<div class="notification">
  <div class="meta">
  Coucou, je suis du test en bazardCoucou, je suis du test en bazardCoucou, je suis du test en bazardsdfsdfsdfsdfsdfsdf
  fds sd sfdf d sfd
  </div>
  <div class="actions"> 
  <div class="action"><span class='text'>MARK</span></div>
    <div class="action"><span class='text'>OK</span></div>
  </div>
</div>
</body>

CSS

body {
  height:auto;
}
.notification {
  display:table;
  background :red;
  width:250px;
  height:100%;
}
.meta {
  width:200px;
  background:green;
  display:        table-cell;
}
.actions {
  display:        table-cell;
  background:yellow;
  width:50px;
  height:100%;
  vertical-align: top;
}
.action {
  display:        block;
  background:red;
  width:100%;
  height:100%;
}
.text {
  display:inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}