How to make a list with each row divided into two columns, with the first column growing to the size of its...












2















Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.



Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.



Failed attempts:



1. Flexbox






span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width of the nick field is not equal among messages which, IMO, is ugly.



2. Fixed width






span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.



3. Grid






div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:




  1. This requires me to get rid of lis and bring all spans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all those spans are not on the same level and hence should be grouped.

  2. This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single li, I have to apply them to two spans and be careful to make them overlap correctly.


What is the correct way to achieve what I want to achieve?






css width column-width







share|improve this question























  • I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

    – Bryce Howitson
    Nov 16 '18 at 22:41






  • 1





    A list with columns? Sounds like a table to me.

    – Alohci
    Nov 16 '18 at 22:59
















2















Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.



Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.



Failed attempts:



1. Flexbox






span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width of the nick field is not equal among messages which, IMO, is ugly.



2. Fixed width






span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.



3. Grid






div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:




  1. This requires me to get rid of lis and bring all spans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all those spans are not on the same level and hence should be grouped.

  2. This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single li, I have to apply them to two spans and be careful to make them overlap correctly.


What is the correct way to achieve what I want to achieve?






css width column-width







share|improve this question























  • I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

    – Bryce Howitson
    Nov 16 '18 at 22:41






  • 1





    A list with columns? Sounds like a table to me.

    – Alohci
    Nov 16 '18 at 22:59














2












2








2








Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.



Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.



Failed attempts:



1. Flexbox






span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width of the nick field is not equal among messages which, IMO, is ugly.



2. Fixed width






span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.



3. Grid






div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:




  1. This requires me to get rid of lis and bring all spans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all those spans are not on the same level and hence should be grouped.

  2. This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single li, I have to apply them to two spans and be careful to make them overlap correctly.


What is the correct way to achieve what I want to achieve?






css width column-width







share|improve this question














Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.



Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.



Failed attempts:



1. Flexbox






span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width of the nick field is not equal among messages which, IMO, is ugly.



2. Fixed width






span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.



3. Grid






div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:




  1. This requires me to get rid of lis and bring all spans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all those spans are not on the same level and hence should be grouped.

  2. This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single li, I have to apply them to two spans and be careful to make them overlap correctly.


What is the correct way to achieve what I want to achieve?






span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





span {

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

}



.author:after {

  content: ":";

}



.message {

  flex: auto;

}



li {

  display: flex;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





span {

  position: relative;

  display: inline-block;

  margin-top: 10px;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  width: 30%;

  text-align: right;

  vertical-align: top;

}



.author:after {

  content: ":";

}



.message {

  width: 65%;

}



ul {

  list-style-type: none;

  padding-left: 0;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>

  <li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





div {

  display: grid;

  grid-template-columns: repeat(2, auto);

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<div>

  <span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  <span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>

</div>





css width column-width




css width column-width






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 16 '18 at 22:32









gaazkamgaazkam

2,073937




2,073937













  • I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

    – Bryce Howitson
    Nov 16 '18 at 22:41






  • 1





    A list with columns? Sounds like a table to me.

    – Alohci
    Nov 16 '18 at 22:59



















  • I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

    – Bryce Howitson
    Nov 16 '18 at 22:41






  • 1





    A list with columns? Sounds like a table to me.

    – Alohci
    Nov 16 '18 at 22:59

















I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

– Bryce Howitson
Nov 16 '18 at 22:41





I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.

– Bryce Howitson
Nov 16 '18 at 22:41




1




1





A list with columns? Sounds like a table to me.

– Alohci
Nov 16 '18 at 22:59





A list with columns? Sounds like a table to me.

– Alohci
Nov 16 '18 at 22:59












1 Answer
1






active

oldest

votes


















2














You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:






ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





Another way is to consider display:table like below:






ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>








share|improve this answer


























  • Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

    – gaazkam
    Nov 22 '18 at 20:52











  • @gaazkam that's why I used padding in the second example ;)

    – Temani Afif
    Nov 22 '18 at 20:53











  • Yeah but I mean this last span { margin-top: 10px; }

    – gaazkam
    Nov 22 '18 at 20:56











  • @gaazkam ah forgot this one .. edited

    – Temani Afif
    Nov 22 '18 at 20:57











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346283%2fhow-to-make-a-list-with-each-row-divided-into-two-columns-with-the-first-column%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:






ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





Another way is to consider display:table like below:






ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>








share|improve this answer


























  • Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

    – gaazkam
    Nov 22 '18 at 20:52











  • @gaazkam that's why I used padding in the second example ;)

    – Temani Afif
    Nov 22 '18 at 20:53











  • Yeah but I mean this last span { margin-top: 10px; }

    – gaazkam
    Nov 22 '18 at 20:56











  • @gaazkam ah forgot this one .. edited

    – Temani Afif
    Nov 22 '18 at 20:57
















2














You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:






ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





Another way is to consider display:table like below:






ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>








share|improve this answer


























  • Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

    – gaazkam
    Nov 22 '18 at 20:52











  • @gaazkam that's why I used padding in the second example ;)

    – Temani Afif
    Nov 22 '18 at 20:53











  • Yeah but I mean this last span { margin-top: 10px; }

    – gaazkam
    Nov 22 '18 at 20:56











  • @gaazkam ah forgot this one .. edited

    – Temani Afif
    Nov 22 '18 at 20:57














2












2








2







You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:






ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





Another way is to consider display:table like below:






ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>








share|improve this answer















You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:






ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





Another way is to consider display:table like below:






ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>








ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





ul {

  display: grid;

  grid-template-columns: repeat(2, auto);

}

li {

  display:contents;

}



.author {

  font-weight: bold;

  margin-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  margin-top: 10px;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>





ul {

  display: table;

}



li {

  display: table-row;

}



.author {

  font-weight: bold;

  padding-right: 5px;

  text-align: right;

}



.author:after {

  content: ":";

}



span {

  padding-top: 10px;

  display: table-cell;

}

<ul>

  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>

  </li>

  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>

</ul>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 22 '18 at 20:57

























answered Nov 16 '18 at 23:07









Temani AfifTemani Afif

67.5k93776




67.5k93776













  • Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

    – gaazkam
    Nov 22 '18 at 20:52











  • @gaazkam that's why I used padding in the second example ;)

    – Temani Afif
    Nov 22 '18 at 20:53











  • Yeah but I mean this last span { margin-top: 10px; }

    – gaazkam
    Nov 22 '18 at 20:56











  • @gaazkam ah forgot this one .. edited

    – Temani Afif
    Nov 22 '18 at 20:57



















  • Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

    – gaazkam
    Nov 22 '18 at 20:52











  • @gaazkam that's why I used padding in the second example ;)

    – Temani Afif
    Nov 22 '18 at 20:53











  • Yeah but I mean this last span { margin-top: 10px; }

    – gaazkam
    Nov 22 '18 at 20:56











  • @gaazkam ah forgot this one .. edited

    – Temani Afif
    Nov 22 '18 at 20:57

















Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

– gaazkam
Nov 22 '18 at 20:52





Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…

– gaazkam
Nov 22 '18 at 20:52













@gaazkam that's why I used padding in the second example ;)

– Temani Afif
Nov 22 '18 at 20:53





@gaazkam that's why I used padding in the second example ;)

– Temani Afif
Nov 22 '18 at 20:53













Yeah but I mean this last span { margin-top: 10px; }

– gaazkam
Nov 22 '18 at 20:56





Yeah but I mean this last span { margin-top: 10px; }

– gaazkam
Nov 22 '18 at 20:56













@gaazkam ah forgot this one .. edited

– Temani Afif
Nov 22 '18 at 20:57





@gaazkam ah forgot this one .. edited

– Temani Afif
Nov 22 '18 at 20:57


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346283%2fhow-to-make-a-list-with-each-row-divided-into-two-columns-with-the-first-column%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Guess what letter conforming each word

Image
6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
Read more

Port of Spain

Image
For ports in the country of Spain, see List of ports in Spain. City in City of Port of Spain, Trinidad and Tobago Port of Spain City City of Port of Spain Top to bottom (left to right): Skyline of Port of Spain from Gulf of Paria; National Academy for the Performing Arts, Independence Square, Eric Williams Plaza; MovieTowne, Port of Port of Spain Motto(s):  "We Gather Strength As We Go Along" Port of Spain Coordinates: 10°40′N 61°31′W  /  10.667°N 61.517°W  / 10.667; -61.517 Coordinates: 10°40′N 61°31′W  /  10.667°N 61.517°W  / 10.667; -61.517 Country   Trinidad and Tobago Jurisdiction City of Port of Spain Settled 1560 Incorporated (town) 1853 Incorporated (city) 1914 Government  • Mayor Joel Martinez  • Governing body City Corporation Area [1]  • City 12 km 2 (5 sq mi) Elevation [2] 66 m (217 ft) Population (2011) [1]  • City 37,074  • Rank 3rd  • Density 3,090/km 2 (8,000/sq mi)...
Read more

Run scheduled task as local user group (not BUILTIN)

Image
0 I am trying to run a scheduled task with User Group (not a single user). This is working fine when I in the field "when running a task, use the following user account:" insert BUILTIN User Group (for example: Administrators or Users). But when I try it with the created Local User Group (example: TestGroup) it is not working. The Users in the TestGroup are the same as in the Administrators group. What could be the problem? Are there some restrictions to the Created User Group compared to BUILTINUsers? scheduled-tasks taskscheduler windowstaskschedule share | improve this question asked Nov 15 '18 at 15:36 Far...
Read more