Text Below Button On The Right

I want the text to be below the button on the right side, like so: |‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾�

Solution 1:

Keep both on the same div

.info_button {
  border: none;
  border-radius: 5px;
  background: #E50000;
  color: #fff;
  padding: 10px20px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 17px;
  display: inline-block;
  font-weight: 330;
}

.box {
  display:table; /* fit content */margin:auto; /* center div */text-align:right; /* push text to right */
}

<divclass="box"><aclass="info_button"href="">Here is a button-text</a><divstyle="font-size: 10px; ">powered by companyname</div></div>

Solution 2:

You can wrap 'info_button' and 'powered by' in div and style it with grid.

.btn {
  display: grid;
  justify-content: center;
}
.info_button{
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E50000;
    color: #fff;
    width: auto;
    text-align: center;
    padding: 10px20px;
    cursor: pointer;
    /*margin-bottom: 20px;*/margin-top: 10px;   
    font-size: 17px;
    display: inline-block;
    font-weight:330;
}
@mediaonly screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
{
    .info_button
    {
        line-height:1.2;
    }
}

<divclass="btn"><divstyle="text-align: center;"><aclass="info_button"href="">Here is a button-text</a></div><divstyle="font-size: 10px; text-align: right; margin-bottom: 20px;">powered by companyname</div></div>