JSFiddle - React, Tailwind, and code Playground

HTML

<div class="przycisk">
    <div class="nazwa">Name</div>
    <div class="wykladowca">Some Longer data, even two lines</div>
    <div class="skrot">skrot</div>
    <div class="godziny">30</div>
    <div style="clear:both"></div>
</div>

CSS

.przycisk{
	cursor: pointer;
	color: #000000;
	width: 130px;
	padding: 5px 5px 5px 5px;
	margin: 0 auto;
	margin-bottom: 5px;
	background-color: #008000;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.przycisk:hover{
	background-color: #383;
}

.przycisk.active{
	border: 4px solid #FF0000;
}

.przycisk .nazwa, .wykladowca, .godziny, .skrot{
	display: table;
	text-align: center;
    margin: 0 auto;
	overflow: hidden;
}

.nazwa{
	font-size: 12px;
	font-weight: bold;
}

.wykladowca{
	font-size: 12px;
	font-weight: bold;
}

.godziny{
	font-weight: bold;
	font-size: 12px;
	background: lightblue;
	padding: 5px 5px 5px 5px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	float: right;
	margin-right: 10px;
}

.skrot{
	font-weight: bold;
	font-size: 12px;
	background: yellow;
	padding: 5px 5px 5px 5px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	float: left;
	margin-left: 10px;
}

.skrot:hover{
	background-color: red;
}