How to show user timetable’s items width do not necessarily match with time

I am currently designing a timetable for a web app which will show appointments as they are scheduled.

Problem is, as I think that in order to make the user understand the scheduled appointment beforehand there is some important information that has to be displayed (Title, time, customer), appointments that are too short in duration will have to have a different width than the time they represent.

My question is, how do I make the user understand that the appointment's width does not necessarily match the time?

I came up with this idea, but I think this still is not straightforward enough...

Update: This is how the timeline is looking following Ashwin's advice.

I'm open to any kind of suggestions!

Thanks!