How to create this UI in Gmail Add-on using Google Apps Script

Question

Can someone tell me how to achieve below UI in Gmail Add-on using Google Apps Script? I tried KeyValue for the icon with text which is clickable and I am able to achieve that but I don't know how to put email text, next to the keyValue icon. Right now, I don't care about the position of the icon with counter and email text, I want them in the same row doesn't matter left or right. This is my code which is just showing icon with counter on the left side but not able to add email text anywhere.

var card = CardService.newCardBuilder()
.setHeader(
  CardService.newCardHeader()
    .setTitle('some Title')
);

 var section = CardService.newCardSection();

 var keyValue = CardService.newKeyValue()
  .setContent(getNumberOfPosts())
  .setIconUrl('https://ayz.png')
  .setOnClickAction(action);

 section.addWidget(keyValue);
 card.addSection(section);

Answer 1

Take a look at this screenshot

I used an emoji for the eye (Add-on support emojis). Does this get you what you are looking for?

          settingSection.addWidget(CardService.newKeyValue()
                                      .setContent("User@email.com")
                                      .setOnClickAction(saveAction)
                                      .setButton(CardService.newTextButton()
                                                 .setText("👁️ 2")
                                                 .setOnClickAction(saveAction))
                                       );