Как отобразить текст на правой стороне здесь?

Question

У меня есть этот сайт: link

Оформить заказ на этом сайте Я хочу отобразить текст в правильной форме «phone», как на картинке ниже.

Это код формы:

<p class="form-row form-row-last validate-required validate-phone woocommerce-invalid woocommerce-invalid-required-field" id="billing_phone_field"> 
    <label for="billing_phone" class="">Phone <abbr class="required" title="required">*</abbr></label> 
    <input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value=""> 
</p> 

Я попытался изменить код так

<p class="form-row form-row-last validate-required validate-phone woocommerce-invalid woocommerce-invalid-required-field" id="billing_phone_field"><label for="billing_phone" class="">Phone <abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value=""> 
<p style="float: left;">text</p></p> 

Вы знаете, как я могу организовать текст прямо там и почему бы не пойти ?

EDIT: пароль: dgdesign

Answer 1

Просто поместите inline element в праве, например small тег:

<p> 
<label for="billing_phone"> 
     Phone <abbr class="required" title="required">*</abbr> 
</label> 
<input 
     type="text" 
     class="input-text " 
     name="billing_phone" 
     id="billing_phone" 
     placeholder="" value=""> 
    <label for="billing_phone" class=""> 
     <small class="some-class"> Phone </small> 
    </label> 
</p> 

и добавить отступы:

small.some-class { padding: 20px; } 

Demo here

Answer 2

Вы можете попробовать добавить style="position: relative;" в <p id="billing_phone">

И сразу после этой строки:

<input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value=""> 

Попробуйте это:

<span style="position: absolute;bottom: 14%; left: 100%">Text goes here</span> 

Надеюсь, что это помогает! :)