<div class="container">
  <article>
    <a class="category" href="#">Design</a>
    <span class="date">Posted on May 14, 2017</span>
    <h1>Typography</h1>
    <p>Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning[1]).</p>
  </article>
</div>

body {
  background-color: #F5F5F5;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  width: 90%;
  margin: 30px auto;
}

article {
  position: relative;
  background: #fff;
  padding: 2em;
  line-height: 1.5;
  margin: 0 auto;
}

.category {
  background-color: #00cc66;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1.25em;
  margin: 0 0 1em 0;
}

.date {
  display: block;
  font-size: smaller;
  font-style: italic;
}

@media (min-width: 480px) {
  @supports (writing-mode: vertical-rl) {
    .category {
      position: absolute;
      top: 0;
      right: 2em;
      margin: 0;
      padding: 1.5em 0.5em;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
    }
  }
}