align languages in help wanted card and only display impact and other info if present

Author: DanielJDufour

src/app/components/help-wanted/card/help-wanted-card.styles.scss

@@ -34,7 +34,7 @@
 
   dl {
     margin-bottom: 0.25rem;
-    padding: 0.75rem 0.75rem;
+    padding: 0.75rem 0rem;
 
     > div {
       display: inline-block;

src/app/components/help-wanted/card/help-wanted-card.template.html

@@ -3,26 +3,26 @@ <h3><a external-link [href]="item.projectURL">{{ item.title }}</a></h3>
   <small>Last updated {{ item.updated | date: "MMM d 'at' h':'mm a"}}</small>
   <p class="help-wanted-card-description">{{ item.description | truncate : 250}}</p>
   <dl *ngIf="!mobile">
-    <div>
+    <div *ngIf="item.languages">
       <dt>Language:</dt>
       <dd>{{ item.languages.join(', ') }}</dd>
     </div>
 
-    <div>
+    <div *ngIf="item.skill">
       <dt>Skill Level:</dt>
       <dd>{{ item.skill | capitalize }}</dd>
     </div>
 
-    <div>
+    <div *ngIf="item.effort">
       <dt>Effort:</dt>
       <dd>{{ item.effort }}</dd>
     </div>
-    
-    <div>
+
+    <div *ngIf="item.impact">
       <dt>Impact:</dt>
       <dd>{{ item.impact | capitalize }}</dd>
     </div>
-    
+
   </dl>
   <div class="help-wanted-card-actions">
     <a external-link [href]="item.projectURL" *ngIf="item.projectURL"><button class="usa-button button--tertiary">Project Details</button></a>