When setting display:Flex to the .container element and placing two children within, I attempted to give a max-width to the second flex-Item child (.box), but it seems to not be working as expected.
body {
font-family: sans-serif
}
.container {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.par {
position: relative;
margin-left: 7px
}
.round {
height: 17px;
width: 17px;
background: #cacaca;
border-radius: 50%
}
.box {
padding: 10px 16px;
box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2);
background: #fff;
position: absolute;
font-size: 14px;
color: #333;
max-width: 200px;
left: -11px;
top: 28px;
}
.box::after {
content: "";
position: absolute;
height: 10px;
width: 10px;
background: #fff;
box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.17);
transform: rotate(-137deg);
top: -5px;
left: 16px;
}<div class="container">
<div>Title</div>
<div class="par">
<div class="round"></div>
<div class="box">This is a Paragraph Text</div>
</div>
</div>