I am facing an issue with positioning a span in a CollectionItem. I need it to be in the top right corner or aligned in the middle, but currently, it is staying in the bottom corner, and the problem seems to be with the first Item.
Below is the code snippet in question:
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<style media="screen">
.wrap {
position: relative;
display: inline-block;
}
.wrap span {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="row">
<div class="col s3 #01579b light-blue darken-4">
<ul class="collection">
<li class="collection-item" style="padding:5px;">
Title
<small><br />First Line</small><span class="secondary-content wrap">17</span>
</li>
<li class="collection-item">Texto2<span class="secondary-content">2</span></li>
</ul>
</div>
<div class="col s9 #00b8d4 cyan accent-4" style="color:white;">
bbb
</div>
</div>
</body>
</html>