html
<span class="fixed-time-column-width"> <span ng-bind="message.startTime"></span> </span> <span><img class="agenda-row-image"></span>
.fixed-time-column-width { min-width: 100px; width: 100px; background-color: lightgreen; }
Strangely, this css wasn't working- well, it wasn't changing the span's width at least. I knew changing it to a <div> would make the width style properties take effect, but then the image and title would be on a new line- not what I wanted!
Display: Block and Float: Left
Luckily, this is easy to fix. Just add float: left; to get the spans floating next to each other. Huzzah! Here's what the finished product looks like:
css (final- correct)