I have a design below which I am trying to replicate in HTML and CSS. 

[![enter image description here](https://i.stack.imgur.com/JseS3.png)](https://i.stack.imgur.com/JseS3.png)

At this moment, I am able to replicate everything excluding `Someone and Relation` text at the bottom. 

The HTML code which I am using for the p tag is:

```
<p>"Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone <br>Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone<br> Review from Someone" </p><p>Someone <br>Relation</p> 

```

Here is the [fiddle](https://jsfiddle.net/mL4mn11h/7/show/) which I have created. In it `Someone` and `Relation` text are at the center, whereas it should go towards the left side with `Relation` text having different color.