<div class="container">
  
  <div class="timeline-item" date-is='20-07-1990'>
    <h1>Hello, 'Im a single div responsive timeline without mediaQueries!</h1>
    <p>
      I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
  </div>
  
  <div class="timeline-item" date-is='20-07-1990'>
    <h1>Oeehhh, that's awesome.. Me too!</h1>
    <p>
      I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
  </div>
  
  <div class="timeline-item" date-is='20-07-1990'>
    <h1>I'm ::last-child so my border fades ^__^</h1>
    <p>
      I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
  </div>
  
</div>

// ----------------  THE BASICS

@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700');

body {
  font-size: 14px;
  line-height: 1.5;
}

// ----------------  THE FONTS

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

h1 {
  font-size: 2rem;
  margin-bottom: .5em;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: .8rem;
}

// ----------------  LAYOUT

.container {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto;
}

// ----------------  THE FONTS

$border-color: rgba(black, .3);

.timeline-item {
  padding: 3em 2em 2em;
  position: relative;
  color: rgba(black, .7);
  border-left: 2px solid $border-color;
  
  p {
    font-size: 1rem;
  }
  
  &::before {
    content: attr(date-is);
    position: absolute;
    left: 2em;
    font-weight: bold;
    top: 1em;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: .785rem;
  }

  &::after {
    width: 10px;
    height: 10px;
    display: block;
    top: 1em;
    position: absolute;
    left: -7px;
    border-radius: 10px;
    content: '';
    border: 2px solid $border-color;
    background: white;
  }

  &:last-child {
    border-image: linear-gradient(
      to bottom,
      $border-color 60%,
      rgba($border-color, 0)) 1 100%
    ;
  }
}