CSS to create something like a table (but not a table)

[NotionCommotion]

Hello everyone! My first time here. I’ve always struggled with CSS and want to get better. Thanks in advance for your help.

I hope what I am trying to explain looks good as I can’t find a preview button should it exist. Oh well, here goes….

I want two rows on the page like the following:

Address:   _________   Map
City:      _________

The “_____” is really an input element. I want the two rows to look like a table with three columns on the first row (“Address:”, input element, and map link) and two columns on the second row (“City:” and input element where there is a span between columns 2 and 3), however, for the mater principle, I don’t want to use a table. Currently, my HTML looks like the following, however, I can add a div wrapper if necessary.

<div>
    <label for="address" class="input">Address:</label>
    <input type="text" id="address" >
    <a href="#">Map</a>
</div>
<div>
    <label for="city" class="input">City:</label>
    <input type="text" id="city" >
</div>

Now, the tricky part (at least for me). I am using jquery-validation, and if there is an error, it automatically inserts a label element below the applicable input (and also automatically adds class “error” to the applicable input element) as shown below. So, now, my HTML would look like:

<div>
    <label for="address" class="input">Address:</label>
    <input type="text" id="address"  class="error">
    <label for="address" generated="true" class="error">This input is required</label>
    <a href="#">Map</a>
</div>
<div>
    <label for="city" class="input">City:</label>
    <input type="text" id="city"  class="error">
    <label for="address" generated="true" class="error">This input is required</label>
</div>

For this scenario, it would like the the following:

Address:   _________   Map
           This input is required
City:      _________
           This input is required

Can anyone help me with the applicable CSS?

Thank you!

PS. Hope this post isn’t posted twice. First time I tried, it didn’t seem to take.

[NotionCommotion]

Hi Wolfcry,

How would you recommend removing the height if the validation label does not exist?

Also, would it be simpler with more html markup or is it okay as is?

Thanks

[Author]

Posts