<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='button'>Employee Name <div> EMPP400764 </div></div>

.button, .button div { color:grey; background:#15d1c4; display:inline-block; line-height:23px; font-size:20px; } .button div { font-size: 13px; padding-right: 5px; padding-left: 10px; width: auto; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; z-index: 1; text-align: left; position: relative; color: #fff; font-weight: bold; } .button { color: #fff; background: grey; padding-left: 5px; width: auto; text-align: right; border-radius: 5px; position: relative; z-index: 1; font-size: 13px; } .button div:after { content: ''; display: block; position: absolute; left: 0px; top: 8px; width: 5px; height: 0px; border-style: solid; border-width:4px 0 5px 4px; border-color: transparent transparent transparent grey; z-index: 0; }