How can I make the content in this form section wrap to the next line in a list-item and overlap the width of the div content?
The second line, particularly where it mentions Security Question two
https://i.sstatic.net/5CVi2.png
This is my HTML & CSS:
<ul class="o-pf-list o-pf-list--mg-left col-md-8 col-lg-8">
<!-- o-pf-list--mg-left -->
<li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="password">Password</label> <div class="pull-left"> ******** </div> </li>
<li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question one</label> <div class="o-pf-text-align">Mothers maiden name? </div> </li>
<li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="security">Security Question two</label> <div class="o-pf-text-align">Name of the pre-primary school you attended? </div> </li>
<li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="ip_hostnames">Allowed IPs & hostnames</label> <div class="pull-left"> All (no restrictions) </div> </li>
<li class="o-pf-list__item"> <label class="col-md-8 col-lg-8" for="allowed_countries">Allowed countries</label> <div class="pull-left"> All (no restrictions) </div> </li>
</ul>
Here is my CSS:
.o-pf-list {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.o-pf-list--mg-left {
margin-left: -15px;
}
.o-pf-list__item {
padding: 5px 0px;
}
.o-pf-text-align {
position: relative;
top: -12px;
float: right;
line-height: 0;
}