I have an issue with a small icon and text not aligning properly. The code snippet causing this problem is as follows: (among other things)
<td class="workview-cell">
{{#if isAvailable}}
{{#if isLoaded}}
A<img id="privileged-access-step-icon" src="{{urlRoot}}/images/crown16sb2.png"
alt="test" title="test" />
{{else}}
B<img id="privileged-access-step-icon" src="{{urlRoot}}/images/crown16sb2.png"
lt="test" title="test" />
{{/if}}
{{/if}}
{{#if showLink}}
<a href="#" class="workview-link {{linkProperties.linkClass}} theme-link-color {{#if showLinkWideOnly}}wideonly{{/if}}" title="{{linkProperties.title}}">{{description}}</a>
C{{#if showLinkWideOnly}}<span class="narrowonly">{{description}}</span>{{/if}}
{{else}}
{{description}}
{{/if}}
</td>
The CSS style applied is:
.workview-cell{padding:3px;vertical-align:middle;}
The resulting HTML markup looks like this:
<td class="workview-cell">
A<img id="privileged-access-step-icon" src="/images/crown16sb2.png" alt="Test" title="Test">
<a href="#" class="workview-link viewstep-link theme-link-color " title="Open summary">Group Step (Initial)</a>
B
</td>
If the sentence is too long, it might break across multiple lines instead of starting right after the icon. My goal is to ensure that the text starts on the same line as the icon, and if needed, wraps to the next line.
Any suggestions on how to achieve this? Thank you in advance.
UPDATE:
This is the current layout:
https://i.sstatic.net/tmSPs.png
My desired outcome is to have the text begin immediately after the icon on the same line and then continue onto the following line if necessary.