I have the following code:

```
<div style="padding-top: 30px; text-align: center; position: relative;">
                    <div id="dvQuotes" style="min-height: 100px; border: 1px solid blue;">
                        <div id="dvOrangeLeftQuote" style="float: left; width: 18%; height: 100%; padding-right: 2%; background: #DDD; text-align: right;">
                            <img src="theImages/quoteOrangeLeft.png" />
                        </div>
                        <div id="dvOrangeQuote" style="text-align: left; width: 80%; font-weight: bold; color: #000000; font-size: medium; margin-top: 40px; margin-bottom: 40px; background: #6c6c6c;">
                            I have been blessed to be assisted by this group. Everyone in all positiong have treated my like family. My doctors are more than excellent, and I can't stop telling everyone about them.
                        </div>
                        <div id="dvOrangeRightQuote" style="padding-left: 2%; float: right; width: 18%; position: absolute; bottom: 0; right: 0; background: #7e75f2; text-align: left;">
                            <img src="theImages/quoteOrangeRight.png" />
                        </div>
                    </div>
                </div>

```

which displays:

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

This is what I am looking to do:

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

How can I achieve it?

UPDATE: when the blue border is removed, the alignment is messed up:

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