How to keep different font sizes on the same base line?

I am making this work by adding a margin-bottom on my small word container but I was hoping there was another elegant/responsive approach to this.

Things I've tried:

1. I've tried align-items: baseline with flexbox but it only takesthe first word and puts it on the baseline and everything else isunder the line.

2. Position absolute everything and use margin's/floats. Takes a lot ofeffort to maintain with different screen sizes.

fid: http://jsfiddle.net/1d4pqvc6/1/

html:

<div class="main"><span class="big">BIG</span><span class="small"><span class="word">Sony A7III</span><span class="word">16-35mm and 85mm</span><span class="word">Nikon D810</span><span class="word">Landscape and Moments</span><span class="word">Photography and Film</span></span><div class="big">WORD</div></div><div class="line"></div>

css:

.center-title{  position: absolute;  /* top: 60%; */  width: 100%;  display: flex;  flex-direction: row;  align-items: flex-end;  align-content: flex-end;  height: 300px;  }.main{  position: relative;  display: inline-block;  height: initial;  display: flex;  flex-direction: row;  align-content: flex-end;  align-items: flex-end;}  .small{    font-size: 1rem;    font-family: "Crimson Text";    font-style: italic;    display: flex;    flex-direction: column;    align-items: flex-start;    justify-content: flex-end;   margin-bottom: 32px;    } .big{    font-size: 13rem;    font-family: Jost;    display: inline-block;    line-height: 13rem;    display: flex;    flex-direction: column;    justify-content: flex-end;    align-items: center;  }      .word{      line-height: 1rem;    }  .line{position: absolute;    width: 100%;    border: 1px solid red;    height: 2px;    top: 184px;  }