Is it possible to make a design as described in the image [![enter image description here](https://i.stack.imgur.com/hsIaQ.png)](https://i.stack.imgur.com/hsIaQ.png)

I have used the following code but it's not working well. Please help!

Problem is that the Q and A text will be in a box and the size will be increased automatically as more text comes in the box.

```
<div style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
    <span style="font-weight:bold;height:30px;width:30px;background-color:aqua;display:inline;">
                Q
    </span>
    <span style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none;display:inline;">
                Date of birth
    </span>
</div>
<div style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
    <span style="font-weight:bold;height:30px;width:30px;background-color:blueviolet;display:inline;">
                A
    </span>
    <span style="font-family: Arial,serif;font-size: 10.6px;color: rgb(68,68,68);font-weight: normal;font-style: normal;text-decoration: none">
                02/08/2019 11:05 - 14/01/1991 (John Doe)
    </span>
</div>

```