Creating table layout in WYSIWYG editor

Question

I am having a design as mentioned in the image.

The content for these should go in a widget. How I am achieving this right now is: by editing it in the WYSIWYG editor by using spaces between the texts. Is there any other way to align this properly.

I have come across such layouts for many of my projects and till now I have been using spaces to align them. But in my recent project I saw that using spaces is not correct solution because in my case, the font I am using behaves bit different on different browsers and thus the space is not consistent.

So, using spaces I am getting correct result on chrome but on firefox the spacing is not the same.

Result on firefox:

I guess there might be a better solution for creating such tabled layout in WYSIWYG editor. Please let me know if there is any. Thanks for your time.

Answer 1

Why you are not using table? Spaces are ridiculus. On WYSIWYG editor select table with 2 columns and 3 rows, align items in left column to left, and in right to center and everything should work fine.

EDIT. Ok, I see where is the problem. TinyMCE (WYSIWYG editor) has table option, but by default it is disabled in WordPress. You can download plugin, for example TinyMCE Advanced, and enable various and powerful TinyMCE options. Also, you can switch view to text editor and add table in HTML:

<table>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
</table>