.right {
    color: #468847;
    position: relative;
    background: #dff0d8;
    text-align: right;
    min-width: 80%;
    padding: 10px 50px;
    border-radius: 6px;
    border: 1px solid lightgreen;
    float: right;
    right: 20px;
}

    .right::before {
        content: '';
        position: absolute;
        visibility: visible;
        bottom: -1px;
        right: -10px;
        border: 10px solid transparent;
        border-bottom: 10px solid lightgreen;
    }

    .right::after {
        content: '';
        position: absolute;
        visibility: visible;
        bottom: 0px;
        right: -8px;
        border: 10px solid transparent;
        border-bottom: 10px solid #dff0d8;
        clear: both;
    }


.left {
    color: #3a87ad;
    position: relative;
    background: #d9edf7;
    text-align: left;
    min-width: 70%;
    padding: 10px 10px;
    border-radius: 10px;
    border: 2px solid #bce8f1;
    float: left;
    left: 10px; 
}

    .left::before {
        content: '';
        position: absolute;
        visibility: visible;
        bottom: -1px;
        left: -10px;
        border: 10px solid transparent;
        border-bottom: 10px solid #bce8f1;
    }

    .left::after {
        content: '';
        position: absolute;
        visibility: visible;
        bottom: 0px;
        left: -8px;
        border: 10px solid transparent;
        border-bottom: 10px solid #d9edf7;
        clear: both;
    }