Сергей delphinpro

Как-то так: ( jsfiddle.net/DelphinPRO/vfhcdu2q/ )

<div class="bubble">
    <div class="bubble-in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsa quisquam deserunt rerum repellendus consequuntur iste inventore et dolorum natus. Suscipit saepe facilis fugit reprehenderit earum. Quibusdam expedita iusto mollitia!
    </div>
</div>

.bubble {
    width: 300px;
    border-radius: 15px;
    border: 3px solid #1AA0D2;
    display: inline-block;
    position: relative;
}
.bubble::after {
    content: '';
    width: 39px;
    height: 50px;
    border-left: 3px solid #1AA0D2;
    border-bottom: 5px solid #1AA0D2;
    position: absolute;
    bottom: -20px;
    left: 40px;
    background: white;
    transform: skewX(-30deg) skewY(-48deg);
}
.bubble-in {
    border-radius: 12px;
    padding: 30px;
    background: white;
    position: relative;
    z-index: 2;
}

left: 50%;
transform: translateX(-50%)

На самом деле работают эти свойства.
Но float`нутые блоки сжимаются до своего содержимого. Если ширина содержимого у вас будет менее min-width, то ширина блока станет равной min-width. Если ширина содержимого будет более max-width, то ширина блока также станет равной max-width. В остальных случаях ширина блока будет равной ширине содержимого.

UPD:
Вот, я накидал примерчик. По-моему, похоже на то, что вам нужно
jsfiddle.net/DelphinPRO/hm3ewt1d/

UPD2:
Или может быть так, если ширина у блоков должна быть постоянной.
jsfiddle.net/DelphinPRO/hm3ewt1d/1/

Если не вдаваться в подробности спецификации, то свойство height:100% (и вообще в процентах) будет работать только если родителю задана высота в абсолютных единицах (например пикселях).

Так и манипулировать - свойством width

jsfiddle.net/dhvzp6wm/9/