Positioning stuck to the top inside a CSS div

Navigation
1

I have the following div with info and a span inside as I can do so that this span is stuck to the top of the div so that it looks like the image: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;">20
                <div style="float: right; font-size: 12px !important">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>
    
asked by Juan 01.11.2018 в 00:17
source

2 answers

2

You can change the line-height property of the container div like this: 

div.chip {
  line-height: 1.2;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;">20
                <div style="float: right; font-size: 12px !important">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>
    
answered by 01.11.2018 / 00:29
source
0

You can put position: relative to your container <div class='chip green accent-2' style="font-size: 25px;"> and position: absolute to container <div style="float: right; font-size: 12px !important"> . To be able to adjust it with top and right . 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;position: relative; padding-right: 2rem;">20
                <div style="float: right; font-size: 12px !important; position: absolute; top: -5px; right: 5px">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>
    
answered by 01.11.2018 в 00:32
How to do select with related tables SQL Errror in group by [duplicate]