JSFiddle - React, Tailwind, and code Playground

HTML

<div class="halfwidth">
<h4  class="agenda_day"><div class="floatright star_agenda">&#9733;</div><div class="floatleft star_agenda">&#9733;</div>Kristine Coady</h4>
</div>

CSS

div.halfwidth {
    display: block;
    position: relative;
    width: 50%;
}
h4
{
	margin: 0 auto;
    display: block;
	font: normal 1.2em "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
	line-height: 1.7em;
	color: #BF2C24;
    text-transform: uppercase;
}

.floatright
{
	float: right;
}

.agenda_day {
	background-color: #BF2C24; 
	color: #f2efe9;
	margin: 1.5em 0;
	padding: .2em;
	text-align: center;
	-moz-border-radius: .4em;
	-webkit-border-radius: .4em;
	border-radius: .4em;
}

.star_agenda {
	color: #f2efe9;
	font-size: 1em;
	width: 1.5em;
}