This Angular code is used to format text into profile page as blocks of data:
<div class="element-box">
<div class="details-wrapper">
<p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p>
<p><b class="label">Raw Request</b>
<pre>
{{apiattempt.raw_request | xmlBeautyfier }}
</pre>
</p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
</div>
</div>
The CSS code for styling the details:
.details-wrapper {
padding: 20px 0;
h4 {
margin-bottom: 0;
}
.activity {
margin-bottom: 20px;
font-size: .8em;
color: #9e9e9e;
}
p {
.label {
display: inline-block;
width: 100px;
margin-right: 10px;
}
}
}
However, the visual result shows that the XML data is not aligned properly. Is there a way to align it like the rest of the text?