JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
        <div class="container">
		<div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis">text here will be going onto 5 lines to show it works even with 5</div>
        <div class="friend">Some text</div>
        <div class="family">text here will be going onto 4 lines to show it works</div>
        <div class="friend">text</div>
        <div class="family">text here will be going onto 4 lines to show it works</div>
        </div>
	</body>
</html>

CSS

.container{
    width:885px;
    height:110px
}
div {
    float:left;
	margin-left: 5px;
	height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}